HTML Drag and Drop

What is the Drag and Drop API?

Drag and Drop (DnD) is a native HTML5 feature that makes elements movable and defines the drop targets that can accept them. Instead of manually tracking mouse coordinates, you make an element draggable and respond to a set of standard drag events. The browser handles the visual dragging for you.

It is commonly used for reordering to-do items, moving cards between columns in a task board, and building custom file-upload drop zones where the user drags files from the desktop into the browser.

Making an element draggable

Add the draggable="true" attribute to any element to make it draggable. Some elements, such as images and links, are draggable by default. To receive a drop, a target must cancel the default handling in its dragover event, because by default browsers do not allow dropping.

The core events

• dragstart - fires on the source element when the drag begins; use it to store data in dataTransfer.
• drag - fires repeatedly on the source while it is being dragged.
• dragenter - fires on a target when a dragged item enters it.
• dragover - fires continuously over a target; call event.preventDefault() here to allow a drop.
• dragleave - fires when the dragged item leaves a target.
• drop - fires on the target when the item is released; read dataTransfer and call preventDefault().
• dragend - fires on the source when the drag finishes (whether dropped or cancelled).

The dataTransfer object

Every drag event carries a dataTransfer object that holds the data being dragged. Use setData(format, value) in dragstart and getData(format) in drop to move information between the source and target. It also exposes a files list for OS file drops and an effectAllowed / dropEffect pair that controls the cursor (copy, move, link).

A complete working example

<style>
  #item { padding: 10px; background: #4f46e5; color: #fff; width: 120px; cursor: grab; }
  #zone { margin-top: 16px; padding: 30px; border: 2px dashed #999; }
  #zone.over { border-color: #4f46e5; background: #eef; }
</style>

<div id="item" draggable="true">Drag me</div>
<div id="zone">Drop here</div>

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

  item.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", "Delivered!");
    e.dataTransfer.effectAllowed = "move";
  });

  zone.addEventListener("dragover", (e) => {
    e.preventDefault();            // required to allow a drop
    e.dataTransfer.dropEffect = "move";
    zone.classList.add("over");
  });

  zone.addEventListener("dragleave", () => zone.classList.remove("over"));

  zone.addEventListener("drop", (e) => {
    e.preventDefault();
    const text = e.dataTransfer.getData("text/plain");
    zone.textContent = text;
    zone.classList.remove("over");
  });
</script>

dataTransfer methods and properties