ドラッグ並べ替えリスト

<ul class="d11-02-11-list">
          <li draggable="true"><span class="d11-02-11-h">⠿</span>デザイン確認</li>
          <li draggable="true"><span class="d11-02-11-h">⠿</span>コーディング</li>
          <li draggable="true"><span class="d11-02-11-h">⠿</span>動作テスト</li>
          <li draggable="true"><span class="d11-02-11-h">⠿</span>公開</li>
        </ul>

.d11-02-11-list{list-style:none;margin:0;padding:0;width:220px;display:flex;flex-direction:column;gap:8px}
        .d11-02-11-list li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#26264a;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:opacity .2s,transform .2s}
        .d11-02-11-list li.is-drag{opacity:.4}
        .d11-02-11-list li.is-over{transform:translateY(3px);border-color:#5b6ef5}
        .d11-02-11-h{color:#c4c8d4;font-size:14px}

(function(){
        var list=document.querySelector('#item-11-02-11 .d11-02-11-list');if(!list)return;
        var dragEl=null;
        list.querySelectorAll('li').forEach(function(li){
          li.addEventListener('dragstart',function(){dragEl=li;li.classList.add('is-drag');});
          li.addEventListener('dragend',function(){li.classList.remove('is-drag');});
          li.addEventListener('dragover',function(e){e.preventDefault();li.classList.add('is-over');});
          li.addEventListener('dragleave',function(){li.classList.remove('is-over');});
          li.addEventListener('drop',function(e){
            e.preventDefault();li.classList.remove('is-over');
            if(dragEl&&dragEl!==li){
              var items=[].slice.call(list.children);
              var from=items.indexOf(dragEl),to=items.indexOf(li);
              if(from<to){list.insertBefore(dragEl,li.nextSibling);}else{list.insertBefore(dragEl,li);}
            }
          });
        });
      })();