Sortable List (Drag and Drop)
JavaScript
Hard
2 views
Problem Description
You have
with - . Allow user to reorder list items by drag and drop.
Output Format
No output (DOM change).
Constraints
Assume #list li items have draggable=true.
Official Solution
const list=document.getElementById('list');let dragEl=null;list.addEventListener('dragstart',e=>{const li=e.target.closest('li');if(!li)return;dragEl=li;e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain','x');});list.addEventListener('dragover',e=>{if(!dragEl)return;e.preventDefault();const over=e.target.closest('li');if(!over||over===dragEl)return;const rect=over.getBoundingClientRect();const after=(e.clientY-rect.top)>(rect.height/2);list.insertBefore(dragEl,after?over.nextSibling:over);});list.addEventListener('drop',e=>{e.preventDefault();dragEl=null;});list.addEventListener('dragend',()=>{dragEl=null;});
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!