HTML Drag and Drop

The ability to grab an item on the screen and fluidly drag it to a completely different location is a cornerstone of modern User Interfaces. With HTML5 native APIs, any element can become draggable!

Activating Draggable Elements

By default, elements like paragraphs and divs are glued to the page. You must explicitly inject the draggable="true" attribute into the HTML tag to allow the user to pick it up.

The Anatomy of a Drop Operation

Creating a drag-and-drop mechanism requires orchestrating specific event listeners:

1. ondragstart: Triggers the exact millisecond the user begins grabbing the element. You use dataTransfer.setData() to pack the element’s ID.
2. ondragover: Attached to the receiving “drop zone”. You must prevent default browser behavior to authorize the drop.
3. ondrop: Executes when the element is released over the drop zone. It reads the transferred data and moves the DOM node.