スワイプで消せる通知トースト

<div class="stage09-12-09">
          <div class="toast09-12-09">
            <span class="tx09-12-09">左右にドラッグして消せます</span>
          </div>
          <span class="hint09-12-09">← スワイプ →</span>
        </div>

.d09-12-09{ background:#f4f5fb; }
        .d09-12-09 .stage09-12-09{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-09 .toast09-12-09{
          position:absolute; left:50%; top:16px; width:220px;
          transform:translate(-50%,0);
          background:#fff; border-radius:11px; padding:13px 15px;
          box-shadow:0 10px 24px rgba(20,30,50,.16);
          cursor:grab; touch-action:pan-y; user-select:none;
          transition:transform .3s ease, opacity .3s ease;
        }
        .d09-12-09 .toast09-12-09.dragging09-12-09{ transition:none; cursor:grabbing; }
        .d09-12-09 .tx09-12-09{ font-size:11.6px; color:#2b3444; font-weight:600; }
        .d09-12-09 .hint09-12-09{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); font-size:10.5px; color:#9aa0b4; letter-spacing:.05em; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-09');
        var stage = root.querySelector('.stage09-12-09');
        var startX = 0, dx = 0, dragging = false, current = null;
        function bind(el){
          el.addEventListener('pointerdown', function(e){
            dragging = true; current = el; startX = e.clientX; dx = 0;
            el.classList.add('dragging09-12-09');
            try{ el.setPointerCapture(e.pointerId); }catch(err){}
          });
          el.addEventListener('pointermove', function(e){
            if(!dragging || current !== el) return;
            dx = e.clientX - startX;
            el.style.transform = 'translate(calc(-50% + ' + dx + 'px),0)';
            el.style.opacity = String(Math.max(0.15, 1 - Math.abs(dx) / 140));
          });
          function end(){
            if(!dragging || current !== el) return;
            dragging = false;
            el.classList.remove('dragging09-12-09');
            if(Math.abs(dx) > 70){
              var dir = dx > 0 ? 1 : -1;
              el.style.transform = 'translate(calc(-50% + ' + (dir * 260) + 'px),0)';
              el.style.opacity = '0';
              setTimeout(function(){
                if(el.parentNode){ el.parentNode.removeChild(el); }
                setTimeout(makeToast, 900);
              }, 300);
            } else {
              el.style.transform = 'translate(-50%,0)';
              el.style.opacity = '1';
            }
          }
          el.addEventListener('pointerup', end);
          el.addEventListener('pointercancel', end);
        }
        function makeToast(){
          var el = document.createElement('div');
          el.className = 'toast09-12-09';
          el.innerHTML = '<span class="tx09-12-09">左右にドラッグして消せます</span>';
          stage.insertBefore(el, stage.firstChild);
          bind(el);
          return el;
        }
        var initial = root.querySelector('.toast09-12-09');
        bind(initial);
      })();