HTML Drag and Drop
In this page:
<tagname draggable="true" ondragstart="handler(event)">Drag me</tagname>
<tagname ondrop="drop(event)" ondragover="event.preventDefault()">Drop zone</tagname>Understanding Drag and Drop
HTML Drag and Drop uses standard browser events to manage interactions. Elements can be made draggable, drop targets are configured to accept drops, and data is transferred between them securely.
Example: Understanding Drag and Drop
<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'item1')">Drag me</div>
<div ondrop="event.preventDefault()" ondragover="event.preventDefault()">Drop here</div>Making Elements Draggable
To make any element draggable, you add the draggable="true" attribute to its opening tag and bind an ondragstart event listener to specify what data should be transferred.
Without this attribute the element remains selectable text or a static image, and dragging it does nothing.
Example: Making Elements Draggable
<div id="item1" draggable="true" ondragstart="event.dataTransfer.setData('text', 'item1')">
Drag me
</div>Configuring Drop Targets
By default, browsers prevent dropping elements on webpage layouts. To turn an element into a drop target, you must bind an ondragover event and call preventDefault to allow dropping.
Example: Configuring Drop Targets
<div ondragover="event.preventDefault()" ondrop="event.preventDefault()">
Drop Zone
</div>Transferring Data with DataTransfer
The DataTransfer object manages the data exchange during the drag-and-drop process. It allows you to save values (like text, IDs, or URLs) on drag start and retrieve them on drop.
Common formats used include 'text/plain' for simple text and 'text/uri-list' for links or file references.
Example: Transferring Data with DataTransfer
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Hello')">Drag</div>
<div ondragover="event.preventDefault()" ondrop="console.log(event.dataTransfer.getData('text/plain'))">
Drop
</div>Dragging Local Files into Drop Zones
The most common use case for drag-and-drop is letting users drag physical files directly from their computers and drop them into your web application to upload them.
Reading these files requires the FileReader API once they land in the drop zone's event handler.
Example: Dragging Local Files into Drop Zones
<div ondragover="event.preventDefault()" ondrop="console.log(event.dataTransfer.files)">
Drop files here
</div>- Forgetting to call preventDefault on the dragover event, which blocks all drops.
- Attempting to read DataTransfer values during the dragover event.
- Omitting support for touchscreen devices, leaving mobile users unable to interact with your site.
- Enable drag-and-drop interactions on your webpage by adding draggable="true" to your tags.
- Use dragover and drop events to turn containers into active drop targets.
- Transfer custom data and files securely between elements using the DataTransfer object.
Standard HTML5 Drag and Drop events are natively supported by all modern desktop browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: