midHTML5
Explain HTML5 Drag and Drop API.
Updated Apr 28, 2026
Short answer
A native way to make elements draggable and handle drop events.
Deep explanation
You set the draggable='true' attribute on an element and use events like ondragstart, ondragover, and ondrop. The dataTransfer object is used to pass data between the dragged item and the target.
Real-world example
A Trello-like board where you move task cards between columns.
Common mistakes
- Forgetting to call `event.preventDefault()` on the `dragover` event, which is required to allow a drop.
Follow-up questions
- Can you drag files from the desktop into the browser?