Drag & Drop

Native HTML5 drag and drop — draggable elements, drop targets, DataTransfer, file drops, and sorting lists.

What it is, in plain English: The HTML5 Drag and Drop API lets users drag elements around the page and drop them on designated targets. The dragging element fires dragstart, drag, and dragend events. The drop target fires dragenter, dragover, dragleave, and drop events. DataTransfer carries the data from drag source to drop target. File drops (from the OS) use the same API — files arrive in event.dataTransfer.files.

Where this bites you

dragleave doesn't mean "the drag left the drop zone". It fires on the drop zone every time the pointer moves onto one of its children, and the child's own dragleave bubbles up as well. Any drop zone with a label or an icon inside it gets a stream of false "left" events, so the highlight flickers. If dragleave hides the zone or resets state, it can vanish right under the cursor.

// <div id="drop-target"><p>Drop here</p></div>   <- a child element inside the target
const dropTarget = document.getElementById("drop-target");

dropTarget.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropTarget.classList.add("drag-over");
});
dropTarget.addEventListener("dragleave", (e) => {
  dropTarget.classList.remove("drag-over");     // runs while the pointer is still inside
  console.log("dragleave fired, pointer now over:", e.relatedTarget?.tagName);
});
// drag into the target, over the <p>, then out:
// dragleave fired, pointer now over: P      <- still inside the drop target
// dragleave fired, pointer now over: DIV    <- bubbled up from the <p>
// dragleave fired, pointer now over: HTML   <- the only real exit

Making elements draggable

Basic drag and drop

<!-- HTML: add draggable="true" to make an element draggable -->
<div draggable="true" id="card">Drag me!</div>
<div id="drop-target">Drop here</div>

const card       = document.getElementById("card");
const dropTarget = document.getElementById("drop-target");

// ── DRAGGABLE ELEMENT EVENTS ──────────────────────────────────────────────
card.addEventListener("dragstart", (event) => {
  // Store data to pass to the drop target:
  event.dataTransfer.setData("text/plain", card.id);
  event.dataTransfer.effectAllowed = "move";  // "copy", "move", "link"
  card.classList.add("dragging");
});

card.addEventListener("dragend", () => {
  card.classList.remove("dragging");
});

// ── DROP TARGET EVENTS ────────────────────────────────────────────────────
dropTarget.addEventListener("dragover", (event) => {
  event.preventDefault();  // ← REQUIRED or drop won't fire!
  event.dataTransfer.dropEffect = "move";
  dropTarget.classList.add("drag-over");
});

dropTarget.addEventListener("dragleave", () => {
  dropTarget.classList.remove("drag-over");
});

dropTarget.addEventListener("drop", (event) => {
  event.preventDefault();
  const id      = event.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  dropTarget.appendChild(dragged);   // move the element
  dropTarget.classList.remove("drag-over");
});

The basic example above has the same pattern, so its highlight flickers as soon as the drop target contains anything. dragleave tells you where the pointer went, in event.relatedTarget. If that's still inside the drop zone, ignore the event:

const dropTarget = document.getElementById("drop-target");

dropTarget.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropTarget.classList.add("drag-over");
});
dropTarget.addEventListener("dragleave", (e) => {
  if (dropTarget.contains(e.relatedTarget)) return;   // moved onto a child: still inside
  dropTarget.classList.remove("drag-over");
  console.log("left the drop target");
});
// same drag: one message, only when the pointer really leaves
// left the drop target

File drop — dragging files from the desktop

dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropZone.classList.add("active");
});

dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropZone.classList.remove("active");

  // Access dropped files:
  const files = [...e.dataTransfer.files];
  files.forEach(file => {
    console.log(`File: ${file.name} (${file.type}, ${(file.size/1024).toFixed(1)}KB)`);

    if (file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = (e) => { preview.src = e.target.result; };
      reader.readAsDataURL(file);
    }
  });
});

Try It Yourself

// Drag and Drop API — fully works in the browser

// Create draggable cards:
const container = document.createElement("div");
container.style.cssText = "display:flex; gap:12px; padding:20px; flex-wrap:wrap;";
document.body.appendChild(container);

const dropZone = document.createElement("div");
dropZone.style.cssText = "padding:20px; border:2px dashed #ccc; border-radius:8px; min-height:80px; margin:20px; text-align:center; color:#999;";
dropZone.textContent = "Drop items here";
document.body.appendChild(dropZone);

// Create draggable items:
["🍎 Apple", "🍌 Banana", "🍇 Grape", "🥭 Mango"].forEach((text, i) => {
  const card = document.createElement("div");
  card.textContent  = text;
  card.draggable    = true;
  card.dataset.id   = i;
  card.style.cssText = "padding:12px 18px; background:#f0f4ff; border:1px solid #c7d2fe; border-radius:8px; cursor:grab; user-select:none;";

card.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", card.dataset.id);
    e.dataTransfer.effectAllowed = "move";
    card.style.opacity = "0.5";
    console.log("Dragging:", text);
  });

card.addEventListener("dragend", () => {
    card.style.opacity = "1";
  });

container.appendChild(card);
});

// Set up drop zone:
dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();  // REQUIRED to allow dropping
  e.dataTransfer.dropEffect = "move";
  dropZone.style.borderColor = "#6366f1";
  dropZone.style.background  = "#eef2ff";
});

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

dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id   = e.dataTransfer.getData("text/plain");
  const card = container.querySelector(`[data-id="${id}"]`);
  const clone = card.cloneNode(true);
  clone.style.opacity = "1";
  dropZone.appendChild(clone);
  card.remove();
  dropZone.style.borderColor = "#ccc";
  dropZone.style.background  = "";
  console.log("Dropped item", id, "into drop zone");
});

console.log("Drag the fruit items into the drop zone!");

Sortable list pattern

// Sortable list — drag items to reorder:
function makeSortable(list) {
  let dragging = null;

  list.querySelectorAll("li").forEach(item => {
    item.draggable = true;

    item.addEventListener("dragstart", (e) => {
      dragging = item;
      e.dataTransfer.effectAllowed = "move";
      setTimeout(() => item.classList.add("dragging"), 0);
    });

    item.addEventListener("dragend", () => {
      dragging = null;
      item.classList.remove("dragging");
      list.querySelectorAll(".drag-over").forEach(el => el.classList.remove("drag-over"));
    });

    item.addEventListener("dragover", (e) => {
      e.preventDefault();
      if (item === dragging) return;
      item.classList.add("drag-over");

      // Determine position:
      const rect = item.getBoundingClientRect();
      const midY = rect.top + rect.height / 2;
      if (e.clientY < midY) {
        list.insertBefore(dragging, item);
      } else {
        list.insertBefore(dragging, item.nextSibling);
      }
    });

    item.addEventListener("dragleave", () => item.classList.remove("drag-over"));
  });
}

DataTransfer types and the HTML DnD spec

// Multiple data types in one drag:
item.addEventListener("dragstart", (e) => {
  const data = { id: 42, name: "Task", priority: "high" };
  e.dataTransfer.setData("application/json", JSON.stringify(data));
  e.dataTransfer.setData("text/plain", data.name);  // fallback
  e.dataTransfer.setData("text/uri-list", `https://app.example.com/task/${data.id}`);
});

// Drop target reads preferred type:
drop.addEventListener("drop", (e) => {
  const json  = e.dataTransfer.getData("application/json");
  const plain = e.dataTransfer.getData("text/plain");
  const data  = json ? JSON.parse(json) : { name: plain };
  console.log(data);
});

// Check what types are available during dragover:
drop.addEventListener("dragover", (e) => {
  const hasJSON = e.dataTransfer.types.includes("application/json");
  e.dataTransfer.dropEffect = hasJSON ? "move" : "copy";
});

The HTML DnD model has three phases: drag operation (starts with dragstart), drag and drop feedback (dragenter/dragover/dragleave on targets), and drop. The DataTransfer object exposes the data store — items can be added only during dragstart (protected phase) and read only during drop (read phase). Calling e.preventDefault() on dragover changes the cursor and enables the drop event.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.