HTML Drag and Drop
Build interactive browser interfaces with native drag and drop capabilities.
Table of Contents
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:
ondragstart: Triggers the exact millisecond the user begins grabbing the element. You usedataTransfer.setData()to pack the element’s ID.ondragover: Attached to the receiving “drop zone”. You must prevent default browser behavior to authorize the drop.ondrop: Executes when the element is released over the drop zone. It reads the transferred data and moves the DOM node.
Preview