📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials HTML Fundamentals HTML Drag and Drop

HTML Drag and Drop

5 min read
Make elements draggable with the draggable='true' attribute. Listen to dragstart to set data, dragover to allow drops with preventDefault, and drop to read data and perform the action.

Native Drag and Drop

<div draggable="true" id="drag1">Drag me</div>
<div id="dropzone">Drop here</div>

<script>
const drag = document.getElementById("drag1");
drag.addEventListener("dragstart", e => e.dataTransfer.setData("text", e.target.id));

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", e => e.preventDefault());
zone.addEventListener("drop", e => {
    e.preventDefault();
    const id = e.dataTransfer.getData("text");
    zone.appendChild(document.getElementById(id));
});
</script>