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.

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");
});

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.