ドラッグ並び替えウィジェット

<div class="d05-05-12-card">
          <div class="d05-05-12-head">ウィジェット並び替え</div>
          <ul class="d05-05-12-list" id="d05-05-12-list">
            <li draggable="true"><span class="d05-05-12-grip">⠿</span>アクセス統計</li>
            <li draggable="true"><span class="d05-05-12-grip">⠿</span>最近のコメント</li>
            <li draggable="true"><span class="d05-05-12-grip">⠿</span>カレンダー</li>
            <li draggable="true"><span class="d05-05-12-grip">⠿</span>売上サマリー</li>
          </ul>
          <p class="d05-05-12-hint">ドラッグして並び替え</p>
        </div>

.prev.d05-05-12{background:#f8fafc}
        .d05-05-12-card{width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-12-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:10px}
        .d05-05-12-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:7px}
        .d05-05-12-list li{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:12px;color:#334155;cursor:grab}
        .d05-05-12-list li.dragging{opacity:.4}
        .d05-05-12-grip{color:#94a3b8;font-size:13px}
        .d05-05-12-hint{margin:0;font-size:10.5px;color:#94a3b8;text-align:center}

(function(){
        var root=document.querySelector('#item-05-05-12');if(!root)return;
        var list=root.querySelector('#d05-05-12-list');
        var dragEl=null;
        list.querySelectorAll('li').forEach(function(li){
          li.addEventListener('dragstart',function(){dragEl=li;li.classList.add('dragging');});
          li.addEventListener('dragend',function(){li.classList.remove('dragging');dragEl=null;});
          li.addEventListener('dragover',function(e){e.preventDefault();});
          li.addEventListener('drop',function(e){
            e.preventDefault();
            if(!dragEl||dragEl===li)return;
            var items=Array.prototype.slice.call(list.children);
            var from=items.indexOf(dragEl),to=items.indexOf(li);
            if(from<to)li.after(dragEl);else li.before(dragEl);
          });
        });
      })();