HTML Drag and Drop

Introduction

The HTML Drag and Drop API lets users drag elements within a page or transfer data between areas. It powers intuitive interactions like rearranging lists, kanban boards, and file upload zones.

This tutorial covers draggable elements, drag events, drop zones, data transfer, customization, common pitfalls, and a complete working example you can run in Try It.

What You’ll Learn

What Is Drag and Drop?

Drag and Drop is a user interface interaction where users click an element, move it while holding the mouse button, and release it over a target. The browser fires a sequence of events you handle with JavaScript to move DOM nodes, copy data, or trigger actions.

Unlike CSS-only hover effects, drag and drop requires explicit setup: a draggable source, event listeners, and a drop target that accepts the release.

Basic Concepts

• Draggable — elements the user can pick up and move (draggable="true").
• Drag events — fired on the source: dragstart, drag, dragend.
• Drop zones — target areas that accept a dropped element.
• Drop events — fired on the target: dragenter, dragover, dragleave, drop.
• dataTransfer — object for passing string data between source and target during a drag.

Creating Draggable Elements

Set draggable="true" on any HTML element you want the user to drag:

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

In dragstart, store data the drop zone will read later:

const draggable = document.getElementById('draggable');

draggable.addEventListener('dragstart', function (event) {
  event.dataTransfer.setData('text/plain', 'This is the dragged data');
});

Images and anchor links are draggable by default; most other elements need the attribute explicitly.

Handling Drag Events

Key events on the dragged element:

• dragstart — user begins dragging; call setData here.
• drag — fires repeatedly while dragging (use sparingly—can hurt performance).
• dragend — drag finished (dropped or cancelled); reset styles here.

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

draggable.addEventListener('dragend', function () {
  console.log('Drag operation ended.');
});

Dropping Elements

Create a drop zone in HTML:

<div id="dropzone">Drop here</div>

Handle drop target events in JavaScript:

• dragover — must call event.preventDefault() to allow dropping.
• dragleave — pointer left the zone; remove hover styles.
• drop — user released; read getData and update the UI.

const dropzone = document.getElementById('dropzone');

dropzone.addEventListener('dragover', function (event) {
  event.preventDefault(); // Required — allows the drop
});

dropzone.addEventListener('drop', function (event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  dropzone.textContent = 'Dropped data: ' + data;
});

Customizing Drag and Drop

Improve the experience with visual feedback and custom drag images:

• Custom drag image — event.dataTransfer.setDragImage(img, x, y) in dragstart.
• Opacity while dragging — add a CSS class in dragstart, remove in dragend.
• Highlight drop zone — toggle a class on dragover / dragleave.
• Cursor — use cursor: grab and cursor: grabbing in CSS.

draggable.addEventListener('dragstart', function (event) {
  const img = new Image();
  img.src = 'custom-drag-image.png';
  event.dataTransfer.setDragImage(img, 0, 0);
});

Use same-origin images for custom drag images to avoid cross-origin restrictions.

Common Pitfalls

• Missing preventDefault() on dragover — drops silently fail without it.
• Forgetting setData — Firefox will not start a drag unless you call setData in dragstart (even for style-only demos).
• Cross-origin drag images — custom images may not render if loaded from another domain.
• Touch devices — native DnD is mouse-oriented; test mobile separately.
• Accessibility — provide keyboard alternatives; drag-only UIs exclude many users.

How Drag and Drop Works

Examples Gallery

Six examples from a draggable box to a full demo. Each includes View Output and Try It Yourself.

<div draggable="true" style="padding:16px;background:#3b82f6;color:#fff;border-radius:8px;cursor:grab;display:inline-block">
  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'); // required in Firefox
  el.classList.add('dragging'); // opacity: 0.5
});
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>
  draggable.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text/plain', 'Dragged Data');
  });
  dropzone.addEventListener('dragover', function (e) { e.preventDefault(); });
  dropzone.addEventListener('drop', function (e) {
    e.preventDefault();
    dropzone.textContent = 'Dropped data: ' + e.dataTransfer.getData('text/plain');
  });
</script>

Best Practices

🚀 Common Use Cases

• Kanban boards — move task cards between columns.
• File upload zones — drop files from the desktop (uses File API with DnD).
• Sortable lists — reorder navigation or playlist items.
• Layout builders — drag widgets onto a canvas.
• Shopping carts — drag products into a basket area.
• Image galleries — rearrange thumbnails before saving.