Drag-to-Reorder List

<ul class="sort" id="sort">
  <li draggable="true"><span class="grip"><svg viewBox="0 0 24 24" width="16" height="16"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></span>Design the landing page</li>
  <li draggable="true"><span class="grip"><svg viewBox="0 0 24 24" width="16" height="16"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></span>Write the documentation</li>
  <li draggable="true"><span class="grip"><svg viewBox="0 0 24 24" width="16" height="16"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></span>Ship the beta release</li>
  <li draggable="true"><span class="grip"><svg viewBox="0 0 24 24" width="16" height="16"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></span>Collect user feedback</li>
</ul>

*{box-sizing:border-box}
.sort{list-style:none;margin:0;padding:0;width:320px;max-width:100%;font-family:system-ui,sans-serif}
.sort li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eceef3;border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:grab;color:#1a1f36;font-weight:500;box-shadow:0 2px 8px rgba(20,25,50,.05);transition:box-shadow .2s,transform .12s,border-color .2s}
.sort li:hover{box-shadow:0 6px 18px rgba(20,25,50,.1)}
.sort li:active{cursor:grabbing}
.sort li.drag{opacity:.4;border-style:dashed}
.sort li.over{transform:scale(1.02);border-color:#5b6cff;box-shadow:0 8px 22px rgba(91,108,255,.18)}
.grip{display:flex;color:#c2c8d6;cursor:grab}
.grip svg{fill:currentColor}

var list=document.getElementById('sort'),dragEl=null;
list.querySelectorAll('li').forEach(function(li){
  li.addEventListener('dragstart',function(){dragEl=li;setTimeout(function(){li.classList.add('drag')},0)});
  li.addEventListener('dragend',function(){li.classList.remove('drag');list.querySelectorAll('li').forEach(function(x){x.classList.remove('over')})});
  li.addEventListener('dragover',function(e){e.preventDefault();if(li!==dragEl)li.classList.add('over')});
  li.addEventListener('dragleave',function(){li.classList.remove('over')});
  li.addEventListener('drop',function(e){e.preventDefault();if(li!==dragEl){var items=[].slice.call(list.children);var di=items.indexOf(dragEl),ti=items.indexOf(li);if(di<ti)li.after(dragEl);else li.before(dragEl);}li.classList.remove('over')});
});