HTML Drag and Drop
In this page:
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.
Note: Use drag-and-drop interactions to make complex tasks like file uploading intuitive for your users.
Warning: Drag-and-drop interactions can be difficult to use on touchscreen mobile devices without custom helper scripts.
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.
Note: Always specify a unique ID on your draggable elements so your scripts can identify them during the drag-and-drop flow.
Warning: Images and links are draggable by default; you must set draggable="false" if you want to lock them in place.
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.
Note: Use simple visual hover styles to show users when they are hovering over a valid drop target.
Warning: If you forget to call preventDefault on the dragover event, the browser will block all drops.
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.
Note: Use DataTransfer to pass clean, structured JSON strings between your drag-and-drop elements.
Warning: DataTransfer is only accessible during dragstart and drop events; trying to read it during dragover will return empty values.
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.
Note: Use standard file reader scripts to process and display image previews as soon as users drop their files.
Warning: Make sure your drop zones have clear borders so users know where to drop their files.
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: