-
Hajipur, Bihar, 844101
HTML Drag and Drop
HTML Drag and Drop is a browser feature that allows users to click an element, drag it across the screen, and drop it somewhere else. It creates interactive experiences like rearranging items, building a custom dashboard, dragging files, and many other user-friendly actions. The browser handles most of the behavior, and you manage the rest with simple JavaScript events. This tutorial will walk you through how drag and drop works, how to set up draggable elements, how to define drop zones, and how to pass data during the drag process. By the end, you’ll have a clear understanding of every step and how to build your own drag-and-drop features.
What does “draggable” mean in HTML?
An element becomes draggable when you add the draggable="true" attribute. Not every element can be dragged by default, so this attribute signals the browser to allow dragging. When dragging begins, the browser triggers a drag event, which you can listen to in JavaScript.
Example:
<p draggable="true">Drag me around</p>
This makes the paragraph movable. However, just setting draggable will not do anything visually until you define where it can be dropped.
How drag and drop works behind the scenes
The drag and drop API works through several JavaScript events. Each event represents a step in the drag movement. Here are the most important ones:
-
dragstart – Fired when the user begins dragging an element.
-
dragover – Fired repeatedly as a draggable element is moved over a drop target.
-
drop – Fired when the element is released into a drop zone.
-
dragend – Fired after the drop finishes, even if the drop failed.
-
dragenter and dragleave – Fired when the dragged element enters or exits a drop zone.
You combine these events with a little JavaScript logic to complete the feature.
Basic example of drag and drop
This example will help you understand the core structure. Here, you’ll drag a small box into a container.
HTML
<div id="dragBox" draggable="true" style="width:80px;height:80px;background:#4CAF50;margin-bottom:10px;"></div>
<div id="dropZone" style="width:200px;height:200px;border:2px dashed #333;"></div>
JavaScript
const dragBox = document.getElementById("dragBox");
const dropZone = document.getElementById("dropZone");
dragBox.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text", e.target.id);
});
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
});
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
const id = e.dataTransfer.getData("text");
const element = document.getElementById(id);
dropZone.appendChild(element);
});
This example teaches three key ideas:
-
We store data during dragstart.
-
We allow dropping by preventing the default behavior in dragover.
-
We append the dragged element into the drop zone on drop.
Why preventDefault is required in dragover
By default, the browser does not allow dropping. The dragover event must include event.preventDefault() to activate drop support. Without this line, the drop event will never fire.
This is one of the most common mistakes beginners face when learning drag and drop.
Passing custom data during drag
Sometimes you want to move more than the ID. You might need to pass a username, an image link, a file reference, or other details. You can store custom data inside the drag event.
Example:
dragBox.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text/plain", "This is custom drag data");
});
Later you can access it inside drop:
const text = e.dataTransfer.getData("text/plain");
console.log(text);
This helps when building advanced tools like kanban boards, chat apps, or drag-to-upload features.
Styling elements during drag
The browser allows you to change the appearance of the dragged element, but you cannot modify it directly during the drag. Instead, you use the dragstart event to adjust visuals.
Example:
dragBox.addEventListener("dragstart", function() {
dragBox.style.opacity = "0.4";
});
dragBox.addEventListener("dragend", function() {
dragBox.style.opacity = "1";
});
This creates a smooth user experience.
Highlighting drop zones
Users must know where they can drop an item. You can highlight the drop area when the draggable element enters.
Example:
dropZone.addEventListener("dragenter", function() {
dropZone.style.background = "#f0f0f0";
});
dropZone.addEventListener("dragleave", function() {
dropZone.style.background = "";
});
This makes the interface interactive and clear.
Drag and drop multiple items
You can create long lists of draggable items by repeating the draggable attribute.
Example:
<ul>
<li draggable="true">Item 1</li>
<li draggable="true">Item 2</li>
<li draggable="true">Item 3</li>
</ul>
Each item can be moved into a container or reordered.
Reordering items within a list
A modern use of drag and drop is sorting items. For example, think of apps like Trello or Notion. You can build this with dragover and drop logic by checking the mouse position and inserting elements before or after a list item. The basic idea is:
-
Store the dragged item.
-
During dragover, decide where it should go.
-
Insert it at the correct position.
This feature gives pages a dynamic, app-like feel without extra libraries.
Drag and drop images
You can drag images the same way as text or divs.
<img id="pic" src="photo.jpg" width="120" draggable="true">
The same JavaScript events apply. You can drop the image into a gallery or change its container.
Security restrictions of drag and drop
Some features are limited for safety:
-
Websites cannot drag local files without user approval.
-
DataTransfer blocks scripting dangerous types.
-
You cannot access file content unless the user drops the file inside a file input or drop zone that reads File API.
These limitations protect users from unwanted actions.
Dragging files from your desktop
Browsers also support dragging files from your computer into a web page. This is useful for drag-to-upload features.
Example:
dropZone.addEventListener("drop", function(e) {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files);
});
You can combine this with PHP or Node.js to upload files to a server.
Summary of HTML Drag and Drop
HTML Drag and Drop lets users pick up elements and move them anywhere on the screen. You start by making an element draggable. Then you define a drop zone and handle events like dragstart, dragover, and drop using JavaScript. You can also pass custom data, style elements during drag, highlight drop areas, and even drag files from the desktop. With these tools, you can build sortable lists, drag-and-drop forms, file upload boxes, dashboards, and many other interactive features that make your web app feel more alive.
Practice Questions
Q1. Make a <div> draggable using draggable="true".
Q2. Create a drop zone <div> that accepts dragged content.
Q3. Use ondragstart to store data in dataTransfer.
Q4. Prevent default behavior using ondragover.
Q5. Append the dragged element to the new parent on drop.
Q6. Add CSS styling to highlight the drop area on dragenter.
Q7. Use dragend to reset the dragged element’s style.
Q8. Make a list of images that can be dragged into a gallery area.
Q9. Create two containers to drag items between them.
Q10. Allow only specific elements to be dropped using dataTransfer checks.
