HTML Drag and Drop

Definition and Usage

The HTML Drag and Drop API lets users select a draggable element with the mouse, drag it, and drop it on a droppable element. A translucent ghost of the item follows the pointer. You customize what can be dragged, what data is transferred, and which HTML elements accept drops.

What are the three parts of a drag?

Every operation involves (1) the item being dragged, (2) the data in the drag data store, and (3) the drop target. Dragging within a page, into a page (files), or out of a page share the same event model with slightly different requirements.

What does HTML markup add?

The draggable attribute marks custom sources. Images, links, and text selections are already draggable by default. A page script listens for drag events and updates the DOM on drop.

When should you use it?

Kanban cards, reordering lists, moving items between panels, or accepting file drops onto an HTML zone. For touch-first mobile apps, plan for limited native support or a dedicated library.

HTML Syntax for Drag and Drop

Mark a source, then wire events in a script:

<p id="p1" draggable="true">This element is draggable.</p>
<p id="target">Drop Zone</p>

<script>
  var p1 = document.getElementById("p1");
  var target = document.getElementById("target");

  p1.addEventListener("dragstart", function (ev) {
    ev.dataTransfer.setData("text/plain", ev.target.innerText);
  });

  target.addEventListener("dragover", function (ev) {
    ev.preventDefault(); // required to allow drop
  });

  target.addEventListener("drop", function (ev) {
    ev.preventDefault();
    ev.target.append(ev.dataTransfer.getData("text/plain"));
  });
</script>

Core HTML Concepts

Building blocks of drag-and-drop on a webpage:

Drag events on HTML elements

dragstart / drag / dragend do not fire when dragging a file into the browser from the OS. Target events do not fire when dragging out of the page.

How to Add Drag and Drop to an HTML Page

Follow this order for a working in-page drag.

1. Add HTML for the source (draggable="true") and the drop zone.
2. On dragstart, call dataTransfer.setData("text/plain", …) (and optional other types).
3. On the drop zone, dragover → preventDefault() so drop is allowed.
4. On drop, preventDefault(), getData, and update the HTML.
5. On dragend, reset source styles (opacity, classes).
6. Optional: highlight the zone on dragenter / dragover, clear on dragleave / drop.

Live Preview

Drag the blue card onto the dashed zone. Uses the same HTML attributes and events as a real page.

Waiting for drop…

HTML Examples

Six patterns: enable dragging, set data, drop zones, dragend cleanup, hover highlight, and a full demo.

<div draggable="true">
  Drag me!
</div>

draggable.addEventListener("dragstart", function (e) {
  e.dataTransfer.setData("text/plain", "Hello from dragstart!");
});

dropzone.addEventListener("dragover", function (e) { e.preventDefault(); });
dropzone.addEventListener("drop", function (e) {
  e.preventDefault();
  dropzone.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});

el.addEventListener("dragstart", function (e) {
  e.dataTransfer.setData("text/plain", "dragging"); // helps Firefox
  el.classList.add("dragging");
});
el.addEventListener("dragend", function () {
  el.classList.remove("dragging");
});

dropzone.addEventListener("dragover", function (e) {
  e.preventDefault();
  dropzone.classList.add("over");
});
dropzone.addEventListener("dragleave", function () {
  dropzone.classList.remove("over");
});

<div id="draggable" draggable="true">Drag me!</div>
<div id="dropzone">Drop here</div>
<script>
  var draggable = document.getElementById("draggable");
  var dropzone = document.getElementById("dropzone");

  draggable.addEventListener("dragstart", function (e) {
    e.dataTransfer.setData("text/plain", "Dragged Data");
  });

  dropzone.addEventListener("dragover", function (e) {
    e.preventDefault();
    dropzone.classList.add("over");
  });

  dropzone.addEventListener("dragleave", function () {
    dropzone.classList.remove("over");
  });

  dropzone.addEventListener("drop", function (e) {
    e.preventDefault();
    dropzone.classList.remove("over");
    dropzone.textContent = "Dropped data: " + e.dataTransfer.getData("text/plain");
  });
</script>

Key Takeaways