ドラッグ並び替えリスト

<ul class="d08-07-01-list" id="d08-07-01-list">
          <li class="d08-07-01-item" data-id="a"><span class="d08-07-01-handle">⠿</span>企画書を作成</li>
          <li class="d08-07-01-item" data-id="b"><span class="d08-07-01-handle">⠿</span>デザイン確認</li>
          <li class="d08-07-01-item" data-id="c"><span class="d08-07-01-handle">⠿</span>クライアント確認</li>
          <li class="d08-07-01-item" data-id="d"><span class="d08-07-01-handle">⠿</span>公開・納品</li>
        </ul>

.d08-07-01-list{list-style:none;margin:0;padding:0;width:100%;max-width:260px;display:flex;flex-direction:column;gap:8px}
        .d08-07-01-item{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;color:#2a2d3a;touch-action:none;user-select:none;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04)}
        .d08-07-01-handle{color:#c4c8d4;font-size:15px;cursor:grab;line-height:1}
        .d08-07-01-item.is-drag{z-index:5;cursor:grabbing;border-color:#6a5cff;box-shadow:0 8px 20px rgba(106,92,255,.22);background:#f7f6ff}

(function(){
        var root=document.getElementById('item-08-07-01');if(!root)return;
        var list=root.querySelector('.d08-07-01-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-07-01-item');if(!item)return;
          dragEl=item;startY=e.clientY;baseTop=item.offsetTop;
          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;
          dragEl.style.transform='';
          dragEl.classList.remove('is-drag');
          dragEl=null;
        }
        list.addEventListener('pointerup',end);
        list.addEventListener('pointercancel',end);
      })();