HTML Drag and Drop (DnD) API

HTML Drag and Drop (DnD) API

The HTML Drag and Drop (DnD) API allows users to drag elements from one location and drop them into another. This is commonly used in file uploads, sorting lists, and interactive interfaces.

It works natively in browsers using JavaScript and does not require any plugins.

Key Concepts

Draggable Element
- Any HTML element can be made draggable using the attribute:
  draggable="true"
Drag Events
- dragstart → Fired when dragging starts
- drag → Fired during dragging
- dragend → Fired when dragging ends
Drop Zone Events
- dragover → Fired when a dragged element is over a drop zone
- drop → Fired when the element is dropped
- dragleave → Fired when the dragged element leaves a drop zone
Data Transfer
- Use event.dataTransfer to pass data between draggable and drop target.

Example: Simple Drag and Drop

<!DOCTYPE html>
<html>
<head>
<title>HTML Drag and Drop Example</title>
<style>
#dragItem {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
margin-bottom: 20px;
cursor: move;
}
#dropZone {
width: 300px;
height: 150px;
border: 2px dashed #000;
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>

<h2>Drag and Drop Example</h2>

<div id="dragItem" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>

<script>
var dragItem = document.getElementById("dragItem");
var dropZone = document.getElementById("dropZone");

// Drag start
dragItem.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
});

// Allow drop
dropZone.addEventListener("dragover", function(event) {
event.preventDefault(); // Necessary to allow dropping
});

// Drop event
dropZone.addEventListener("drop", function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
var draggedElement = document.getElementById(data);
dropZone.appendChild(draggedElement);
alert("Element dropped successfully!");
});
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML Drag and Drop Example</title>

<style>

#dragItem {

width: 100px;

height: 100px;

background-color: lightblue;

text-align: center;

line-height: 100px;

margin-bottom: 20px;

cursor: move;

}

#dropZone {

width: 300px;

height: 150px;

border: 2px dashed #000;

text-align: center;

line-height: 150px;

}

</style>

</head>

<body>

<h2>Drag and Drop Example</h2>

var dragItem = document.getElementById("dragItem");

var dropZone = document.getElementById("dropZone");

// Drag start

dragItem.addEventListener("dragstart", function(event) {

event.dataTransfer.setData("text", event.target.id);

});

// Allow drop

dropZone.addEventListener("dragover", function(event) {

event.preventDefault(); // Necessary to allow dropping

});

// Drop event

dropZone.addEventListener("drop", function(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

var draggedElement = document.getElementById(data);

dropZone.appendChild(draggedElement);

alert("Element dropped successfully!");

});

</script>

</body>

</html>

Explanation

draggable="true" → Makes the element draggable.
dragstart → Stores the element’s ID in dataTransfer.
dragover → Must prevent default to allow dropping.
drop → Retrieves the dragged element and appends it to the drop zone.

Key Points

The Drag and Drop API is purely client-side, requiring HTML, CSS, and JavaScript.
It is interactive and widely used for file uploads, sorting lists, and UI customization.
Use dataTransfer to pass data or even files.
Works best with modern browsers.

HTML Drag and Drop (DnD) API