バウンド整列ドラッグ並べ替えリスト

<ul class="d08-15-12-list" id="d08-15-12-list">
          <li class="d08-15-12-item" data-id="a">🎨 デザイン</li>
          <li class="d08-15-12-item" data-id="b">✍️ 原稿</li>
          <li class="d08-15-12-item" data-id="c">🔍 レビュー</li>
          <li class="d08-15-12-item" data-id="d">🚀 公開</li>
        </ul>

.d08-15-12-list{list-style:none;margin:0;padding:0;width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px}
        .d08-15-12-item{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:600;color:#2a2d3a;touch-action:none;user-select:none;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04)}
        .d08-15-12-item.is-drag{z-index:5;cursor:grabbing;border-color:#6a5cff;box-shadow:0 8px 20px rgba(106,92,255,.22);background:#f7f6ff}
        .d08-15-12-item.is-bounce{animation:d08-15-12-pulse .5s cubic-bezier(.34,1.56,.64,1)}
        @keyframes d08-15-12-pulse{0%{transform:scale(1.1)}50%{transform:scale(.95)}100%{transform:scale(1)}}

(function(){
        var root=document.getElementById('item-08-15-12');if(!root)return;
        var list=root.querySelector('#d08-15-12-list');if(!list)return;
        var dragEl=null,startY=0,baseTop=0;
        function itemsArr(){return Array.prototype.slice.call(list.children);}
        list.addEventListener('pointerdown',function(e){
          var item=e.target.closest('.d08-15-12-item');if(!item)return;
          dragEl=item;startY=e.clientY;baseTop=item.offsetTop;
          item.classList.remove('is-bounce');
          item.classList.add('is-drag');
          try{item.setPointerCapture(e.pointerId);}catch(err){}
        });
        list.addEventListener('pointermove',function(e){
          if(!dragEl)return;
          var dy=e.clientY-startY;
          dragEl.style.transform='translateY('+dy+'px)';
          var dragTop=baseTop+dy;
          var dragMid=dragTop+dragEl.offsetHeight/2;
          itemsArr().forEach(function(sib){
            if(sib===dragEl)return;
            var sibMid=sib.offsetTop+sib.offsetHeight/2;
            if(dragMid>sibMid&&sib.offsetTop>baseTop){
              list.insertBefore(dragEl,sib.nextSibling);
              baseTop=dragEl.offsetTop-dy;
            }else if(dragMid<sibMid&&sib.offsetTop<baseTop){
              list.insertBefore(dragEl,sib);
              baseTop=dragEl.offsetTop-dy;
            }
          });
        });
        function end(){
          if(!dragEl)return;
          var el=dragEl;
          el.style.transform='';
          el.classList.remove('is-drag');
          el.classList.add('is-bounce');
          setTimeout(function(){el.classList.remove('is-bounce');},520);
          dragEl=null;
        }
        list.addEventListener('pointerup',end);
        list.addEventListener('pointercancel',end);
      })();