📘 Lesson · Lesson 32

Drag and Drop

What Drag and Drop Is

HTML5 lets you pick up an element with the mouse, drag it, and drop it somewhere else — the interaction behind file-upload zones ("drag files here"), Trello-style boards, and sortable lists. Before HTML5 this needed heavy JavaScript libraries; now the browser provides it natively through a draggable attribute plus a set of drag events. It always involves two roles: the thing being dragged (source) and the place it lands (target/drop zone).

Step 1: draggable — make something pick-up-able

<div id="card" draggable="true">Drag me</div>

[ "Drag me" box - now you can literally grab and move it with the mouse ]

The draggable="true" attribute is the on-switch. (Images and links are draggable by default; for a div you must set it explicitly.) On its own it lets you drag — but nothing happens on drop yet. That needs events, next.

The Drag Events — who fires what

Event	Fires on	When
`dragstart`	The dragged item	You begin dragging — grab its data here
`dragover`	The drop zone	Item is hovering over — must allow the drop here
`drop`	The drop zone	You release — do the actual work here
`dragenter / dragleave`	The drop zone	Item enters/leaves — used to highlight the zone

Mental split: dragstart lives on the source (what am I carrying?); dragover and drop live on the destination (accept it, then handle it). Get this source-vs-target split clear and drag-and-drop stops feeling confusing.

The preventDefault Secret — why drop "doesn't work"

dropZone.addEventListener("dragover", function(e) {
    e.preventDefault();      // ← WITHOUT this line, drop never fires!
});

The #1 drag-and-drop bug, and its explanation: by default, browser elements refuse to be drop targets (historically, dropping meant "open this file/link"). So you must explicitly say "yes, allow dropping here" by calling e.preventDefault() in the dragover handler. Skip it and your drop handler simply never runs — the item snaps back. This one counter-intuitive line is the single most asked drag-drop interview point.

A Working Example

<div id="item" draggable="true">📦 Box</div>
<div id="zone" style="border:2px dashed gray; padding:30px">Drop here</div>

<script>
  const item = document.getElementById("item");
  const zone = document.getElementById("zone");

  item.addEventListener("dragstart", function(e) {
      e.dataTransfer.setData("text", e.target.id);   // remember WHAT is dragged
  });

  zone.addEventListener("dragover", function(e) {
      e.preventDefault();                            // allow dropping
  });

  zone.addEventListener("drop", function(e) {
      e.preventDefault();
      const id = e.dataTransfer.getData("text");     // recall what was dragged
      zone.appendChild(document.getElementById(id)); // move it into the zone
  });
</script>

Drag "📦 Box" into the dashed area → it becomes a child of the drop zone.

dataTransfer is the little clipboard that carries information from the source to the drop — here just the dragged element's id, so the drop handler knows which element to move. Full drag-and-drop projects live in our JavaScript course; this shows the complete shape.

Exam Corner

Q: Which attribute makes an element draggable? draggable="true".

Q: Name the key drag events. dragstart (source), dragover and drop (target); also dragenter/dragleave.

Q: Why must you call preventDefault in dragover? By default elements reject drops; preventDefault allows the drop event to fire.

Q: What carries data from drag to drop? The dataTransfer object (setData / getData).

Q: On which element does dragstart fire? The element being dragged (the source).

Drag and Drop क्या है

HTML5 Drag and Drop API आपको किसी element को माउस से उठाकर दूसरी जगह छोड़ने की सुविधा देता है — जैसे Trello के cards एक column से दूसरे में खींचना, या file को upload box में गिराना. HTML सिर्फ इतना बताता है कि कौन-सा element उठाया जा सकता है; बाकी सारा काम — क्या उठा, कहाँ गिरा, अब क्या करना है — JavaScript के events संभालते हैं. यह भी canvas की तरह HTML + JavaScript की जोड़ी है.

Step 1: draggable attribute

<!-- Ise uthaya ja sakta hai -->
<div id="item" draggable="true">Mujhe kheencho</div>

<!-- Yahan gira sakte hain -->
<div id="dropzone">Yahan giraiye</div>

किसी भी element पर draggable="true" लगाते ही वह उठाने योग्य बन जाता है. ध्यान दीजिए यह draggable लिखना ज़रूरी है — true value के साथ, सिर्फ attribute नाम काफी नहीं. एक मज़े की बात: <a> और <img> डिफ़ॉल्ट रूप से पहले से draggable होते हैं. Drop zone पर कोई खास attribute नहीं चाहिए — उसे JavaScript में बताना पड़ता है कि वह drop स्वीकार करता है (अगला section यही राज़ खोलता है).

Drag Events

Event	किस पर चलता है	कब
`dragstart`	उठाया जा रहा element	खींचना शुरू होते ही
`dragover`	Drop zone	जब item उसके ऊपर से गुज़रे
`drop`	Drop zone	जब item छोड़ा जाए
`dragend`	उठाया गया element	खींचना खत्म होने पर

चार events याद रखिए, पर असल में सिर्फ तीन काम के हैं. dragstart पर आप यह "याद" रखते हैं कि कौन-सा item उठाया गया. dragover लगातार fire होता रहता है जब तक item drop zone के ऊपर है. drop पर आप असली काम करते हैं — item को नई जगह लगाना. dragenter और dragleave भी हैं, जो drop zone को highlight करने के लिए काम आते हैं.

preventDefault का राज़

dropzone.addEventListener("dragover", function(e) {
    e.preventDefault();      // ← ISKE BINA drop kabhi nahi hoga!
});

dropzone.addEventListener("drop", function(e) {
    e.preventDefault();      // browser file kholne se ruke
    // ...asli kaam yahan
});

यह सबसे बड़ा और सबसे उलझाने वाला नियम है: browser का default व्यवहार drop को मना करना है. इसलिए dragover event में e.preventDefault() लिखना अनिवार्य है — यही browser को बताता है "यह एक valid drop zone है." यह भूलने पर आपका item खींचा तो जाएगा, पर कहीं गिरेगा नहीं, और कोई error भी नहीं आएगा. drop में भी preventDefault() चाहिए, वरना browser गिराई हुई file को नए tab में खोल देगा. यह वही e.preventDefault() है जो form submit में आपने देखा — browser की built-in क्रिया रोकना.

चलता Example

<div id="item" draggable="true">📦 Item</div>
<div id="dropzone" style="min-height:100px;border:2px dashed #999">
    Yahan giraiye
</div>

const item = document.getElementById("item");
const zone = document.getElementById("dropzone");

// 1. Uthate samay: kaun-sa item hai, yaad rakho
item.addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("text/plain", e.target.id);
});

// 2. Ooper se gujarte samay: drop ki anumati do
zone.addEventListener("dragover", function(e) {
    e.preventDefault();
    zone.style.background = "#eef";      // highlight
});

// 3. Girate samay: item ko zone me daal do
zone.addEventListener("drop", function(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData("text/plain");
    zone.appendChild(document.getElementById(id));
    zone.style.background = "";
});

dataTransfer object वह डाक-थैला है जो drag के दौरान जानकारी ले जाता है. dragstart में आप setData() से item की id उसमें रखते हैं, और drop में getData() से निकाल लेते हैं. फिर appendChild() उस element को उठाकर drop zone में लगा देता है — DOM में एक element एक ही जगह रह सकता है, इसलिए वह अपने आप पुरानी जगह से हट जाता है. यही तीन कदम — याद रखो, अनुमति दो, लगाओ — हर drag-and-drop feature का आधार हैं.

Exam Corner

Q: Element को draggable कैसे बनाते हैं? draggable="true" attribute लगाकर.

Q: dragover में preventDefault() क्यों ज़रूरी है? इसके बिना browser drop की अनुमति नहीं देता — item कहीं गिरता ही नहीं.

Q: खींचे जा रहे item की जानकारी कहाँ रखी जाती है? e.dataTransfer object में, setData() से.

Q: dragstart किस element पर चलता है? उस element पर जिसे उठाया जा रहा है.

Q: drop event में सबसे पहले क्या करना चाहिए? e.preventDefault() — ताकि browser file न खोल दे.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.