ハンドル付き並べ替えタイル

<div class="d08-07-05-grid" id="d08-07-05-grid">
          <div class="d08-07-05-tile" draggable="true" style="background:#6a5cff">1<span class="d08-07-05-h">⠿</span></div>
          <div class="d08-07-05-tile" draggable="true" style="background:#22c55e">2<span class="d08-07-05-h">⠿</span></div>
          <div class="d08-07-05-tile" draggable="true" style="background:#ff9f43">3<span class="d08-07-05-h">⠿</span></div>
          <div class="d08-07-05-tile" draggable="true" style="background:#ff5470">4<span class="d08-07-05-h">⠿</span></div>
        </div>

.d08-07-05-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:180px}
        .d08-07-05-tile{position:relative;aspect-ratio:1;border-radius:12px;color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 3px 10px rgba(0,0,0,.15)}
        .d08-07-05-tile.is-drag{opacity:.35}
        .d08-07-05-tile.is-over{outline:3px solid #fff;outline-offset:-3px}
        .d08-07-05-h{position:absolute;bottom:4px;right:6px;font-size:11px;opacity:.75}

(function(){
        var root=document.getElementById('item-08-07-05');if(!root)return;
        var grid=root.querySelector('#d08-07-05-grid');if(!grid)return;
        var dragTile=null;
        grid.addEventListener('dragstart',function(e){
          var t=e.target.closest('.d08-07-05-tile');if(!t)return;
          dragTile=t;t.classList.add('is-drag');
        });
        grid.addEventListener('dragend',function(){
          if(dragTile)dragTile.classList.remove('is-drag');
          grid.querySelectorAll('.d08-07-05-tile').forEach(function(n){n.classList.remove('is-over');});
          dragTile=null;
        });
        grid.querySelectorAll('.d08-07-05-tile').forEach(function(tile){
          tile.addEventListener('dragover',function(e){e.preventDefault();if(tile!==dragTile)tile.classList.add('is-over');});
          tile.addEventListener('dragleave',function(){tile.classList.remove('is-over');});
          tile.addEventListener('drop',function(e){
            e.preventDefault();tile.classList.remove('is-over');
            if(!dragTile||dragTile===tile)return;
            var tiles=Array.prototype.slice.call(grid.children);
            var di=tiles.indexOf(dragTile),ti=tiles.indexOf(tile);
            if(di<ti)grid.insertBefore(dragTile,tile.nextSibling);
            else grid.insertBefore(dragTile,tile);
          });
        });
      })();