🖱️ Drag and Drop in JavaScript – Complete Tutorial

Drag and Drop is an HTML5 feature that allows users to drag elements from one place and drop them into another. JavaScript handles the drag-and-drop events to control what happens during the interaction.

📌 What is Drag and Drop?

Drag and Drop enables users to move elements such as images, files, cards, or text by clicking, dragging, and dropping them onto a target area.

>>"Drag the element, drop it on a valid target, and handle the action using JavaScript events."

💡 Common Use Cases

  • 📋 Task management boards (Kanban)
  • 📂 File upload areas
  • 🖼️ Image galleries
  • 🎮 Drag-and-drop games
  • 📦 Rearranging lists and cards

🏗 Basic HTML Structure

To make an element draggable, add the draggable="true" attribute.

HTML Example

<div id="box" draggable="true">
  Drag Me
</div>

<div id="dropZone">
  Drop Here
</div>

📢 Drag and Drop Events

EventDescription
dragstartFires when dragging begins.
dragFires continuously while dragging.
dragendFires when dragging ends.
dragenterWhen a draggable enters a drop target.
dragoverFires while the item is over a drop target.
dragleaveWhen the draggable leaves a drop target.
dropFires when the item is dropped.

🚀 Step 1: Start Dragging

Use the dragstart event to store information about the dragged element.

dragstart Event

const box = document.getElementById("box");

box.addEventListener("dragstart", (event) => {
  event.dataTransfer.setData(
    "text",
    event.target.id
  );
});

🚀 Step 2: Allow Dropping

By default, dropping is not allowed. Callevent.preventDefault() inside thedragover event.

dragover Event

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

dropZone.addEventListener(
  "dragover",
  (event) => {
    event.preventDefault();
  }
);

🚀 Step 3: Handle Drop

drop Event

dropZone.addEventListener(
  "drop",
  (event) => {
    event.preventDefault();

    const id = event.dataTransfer.getData("text");

    const element =
      document.getElementById(id);

    dropZone.appendChild(element);
  }
);

🎨 Styling the Drop Zone

CSS Example

#dropZone {
  width: 300px;
  height: 200px;
  border: 2px dashed gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box {
  width: 100px;
  padding: 20px;
  background: royalblue;
  color: white;
  text-align: center;
  cursor: grab;
}

✨ Highlight Drop Area

Use dragenter and dragleave to provide visual feedback.

Highlight Drop Zone

dropZone.addEventListener(
  "dragenter",
  () => {
    dropZone.style.background = "#dbeafe";
  }
);

dropZone.addEventListener(
  "dragleave",
  () => {
    dropZone.style.background = "";
  }
);

dropZone.addEventListener(
  "drop",
  () => {
    dropZone.style.background = "";
  }
);

📂 Dragging Files

You can also drag files from the operating system into a web page.

Read Dropped Files

dropZone.addEventListener(
  "drop",
  (event) => {
    event.preventDefault();

    const files = event.dataTransfer.files;

    console.log(files);
  }
);

🛠 Complete Example

HTML

<div id="box" draggable="true">
  Drag Me
</div>

<div id="dropZone">
  Drop Here
</div>

JavaScript

const box = document.getElementById("box");
const dropZone =
  document.getElementById("dropZone");

box.addEventListener(
  "dragstart",
  (event) => {
    event.dataTransfer.setData(
      "text",
      event.target.id
    );
  }
);

dropZone.addEventListener(
  "dragover",
  (event) => {
    event.preventDefault();
  }
);

dropZone.addEventListener(
  "drop",
  (event) => {
    event.preventDefault();

    const id =
      event.dataTransfer.getData("text");

    const item =
      document.getElementById(id);

    dropZone.appendChild(item);
  }
);

📊 Drag Event Flow

The typical sequence of events is:

  1. 🖱️ dragstart → User begins dragging.
  2. 🔄 drag → Fires repeatedly while dragging.
  3. ➡️ dragenter → Draggable enters the drop target.
  4. 📍 dragover → Must call preventDefault() to allow dropping.
  5. ⬅️ dragleave → Draggable leaves the drop target.
  6. 📥 drop → User releases the item over the target.
  7. 🏁 dragend → Dragging operation finishes.

⚠️ Common Mistakes

  • ❌ Forgetting event.preventDefault() in dragover.
  • ❌ Not adding draggable="true" to the draggable element.
  • ❌ Forgetting to use dataTransfer.setData() and getData().
  • ❌ Ignoring visual feedback, making the UI confusing.

Note

The HTML5 Drag and Drop API works well for desktop browsers. On touch devices, support varies, and many applications use pointer events or libraries for a smoother drag-and-drop experience.

✅ Best Practices

  • 🎨 Highlight valid drop targets during dragging.
  • 🖱️ Use cursor: grab and cursor: grabbing for better UX.
  • ⚡ Keep drop handlers lightweight for smooth performance.
  • 📱 Consider touch-friendly alternatives for mobile devices.
  • ♿ Add keyboard support and accessibility features where appropriate.

🎯 Summary

Drag and Drop in JavaScript enables interactive user interfaces by combining HTML's draggable attribute with drag-and-drop events such asdragstart, dragover, and drop. It is widely used for file uploads, dashboards, sortable lists, and other rich web applications.