The HTML Drag and Drop API allows users to click, drag, and drop elements between different containers on a web page, enabling interactive Kanban boards, file drop zones, and element reordering.
To make an element draggable, set draggable="true" and handle key drag/drop events:
<!-- Draggable Element -->
<div draggable="true" ondragstart="handleDragStart(event)">Drag Me</div>
<!-- Drop Zone Container -->
<div ondragover="event.preventDefault()" ondrop="handleDrop(event)">Drop Here</div>
Key drag and drop events:
ondragstart: Fires on the target element when the user starts dragging.ondragover: Fires continuously on the drop target while an item is dragged over it (must call event.preventDefault() to allow dropping).ondrop: Fires on the drop target when the user releases the dragged element.dataTransfer: Event object property used to store and transfer dragged data payload (event.dataTransfer.setData()).flowchart TD
A["User Drags draggable='true' Element"] --> B["ondragstart: Save Data to event.dataTransfer"]
B --> C["User Drags Over Drop Zone"]
C --> D["ondragover: event.preventDefault() (Allows Drop)"]
D --> E["User Releases Mouse"]
E --> F["ondrop: Read dataTransfer & Append Element to Drop Zone"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Drag and Drop Example</title>
<style>
.box { width: 100px; height: 100px; background-color: #38bdf8; border-radius: 8px; cursor: move; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #0f172a; }
.dropzone { width: 200px; height: 150px; background-color: #1e293b; border: 2px dashed #334155; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Kanban Drag and Drop Demo</h2>
<div style="display: flex; gap: 2rem; align-items: center;">
<div id="dragItem" class="box" draggable="true">Card</div>
<div id="dropContainer" class="dropzone">Drop Zone</div>
</div>
<script>
const item = document.getElementById("dragItem");
const zone = document.getElementById("dropContainer");
item.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", e.target.id);
});
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // Required to enable drop
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
zone.style.borderColor = "#34d399";
});
</script>
</body>
</html>
event.preventDefault() inside dragover: Browsers block file and element dropping by default; calling preventDefault() enables dropping.Create a <div> element with draggable="true" and an ondragstart handler saving data via event.dataTransfer.setData()!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.