Move Things Around With Drag and Drop!

Imagine moving a task from “To Do” to “Completed” simply by dragging it across the screen. Or rearranging cards in a dashboard. That’s what the HTML Drag and Drop API can help you build.

Try this little task board! Drag a card between columns, or use its button to move it.

Meet the draggable Attribute

To make an ordinary HTML element draggable with the native API, set draggable="true".

<div id="task1" draggable="true">
  Drag this task!
</div>

But there’s an important detail: making something draggable doesn’t automatically tell the browser where to put it. You need JavaScript event listeners to handle the movement.

Understand the Drag Lifecycle

The browser fires several events while someone drags an element. The most useful are:

• dragstart — the drag begins.
• dragover — the dragged item moves over a possible target.
• drop — the item is released on an accepted target.
• dragend — the drag operation finishes.

const task = document.getElementById("task1");

task.addEventListener("dragstart", function(event) {
  console.log("Dragging started!");
});

task.addEventListener("dragend", function() {
  console.log("Dragging finished!");
});

Think of these events as checkpoints. They let your code respond at different moments during a drag operation.

Tell the Drop Zone What’s Moving

During a drag operation, the browser provides a dataTransfer object. You can use it to pass an identifier for the item being dragged.

task.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text/plain", task.id);
  event.dataTransfer.effectAllowed = "move";
});

Later, the drop handler can read the ID using getData("text/plain") and find the matching element.

Make a Container Accept Drops

For an element to accept a drop, you usually need to cancel the default behavior of the dragover event.

const zone = document.getElementById("completed");

zone.addEventListener("dragover", function(event) {
  event.preventDefault();
});

zone.addEventListener("drop", function(event) {
  event.preventDefault();

  const id = event.dataTransfer.getData("text/plain");
  const task = document.getElementById(id);

  if (task && task.classList.contains("task")) {
    zone.appendChild(task);
  }
});

The appendChild() method moves an existing element to its new parent. It doesn’t create a duplicate.

Show Visitors Where to Drop

Good drag-and-drop interfaces give visual feedback. You might highlight a drop zone when a draggable item enters it, then remove the highlight afterward.

.drop-zone {
  border: 2px dashed #64748b;
  padding: 20px;
}

.drop-zone.over {
  border-color: #4ee4a1;
  background: #e1fff0;
}

JavaScript can add or remove the over class in response to drag events. A clear target makes the interface easier to understand.

Don’t Make Dragging the Only Option

Native HTML drag-and-drop behavior can vary across touch devices and is not an accessible interaction by itself.

For a task board, an excellent alternative is a button that moves the same card without requiring a drag gesture.

<button type="button" id="moveTask">
  Move task to Completed
</button>

<script>
document.getElementById("moveTask")
  .addEventListener("click", function() {
    document.getElementById("completed")
      .appendChild(document.getElementById("task1"));
  });
</script>