🎯 Drag and Drop API

Direct Manipulation on the Web

The HTML5 Drag and Drop (DnD) API lets users grab an on-screen element and move it somewhere else, mirroring how we shuffle papers on a desk. Because the gesture matches a physical intuition, drag-and-drop interfaces feel obvious with almost no instruction.

You'll find it powering:

• File uploads — dragging files from the desktop into the page
• Kanban boards — moving cards between "To Do" and "Done"
• Sortable lists — reordering items by priority
• Builders and editors — arranging blocks, images, or form fields

The Seven Drag Events

A drag is a sequence of events split between the source (what you're dragging) and the target (where you might drop it):

Making Elements Draggable

Any element becomes draggable with one attribute:

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

Images, links, and selected text are draggable by default. To make the drag mean something, handle dragstart — that's where you stash the data being moved and set the allowed effect:

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

card.addEventListener('dragstart', (event) => {
  // Attach the payload — here, the element's id
  event.dataTransfer.setData('text/plain', event.target.id);
  event.dataTransfer.effectAllowed = 'move';
  card.classList.add('dragging'); // for CSS feedback
});

card.addEventListener('dragend', () => {
  card.classList.remove('dragging'); // always clean up
});

Creating Drop Zones

Here's the part that surprises everyone: by default the browser refuses drops. To turn an element into a valid drop zone you must call event.preventDefault() in its dragover handler. Skip that one line and drop never fires.

const zone = document.getElementById('drop-zone');

// preventDefault here is what makes dropping possible
zone.addEventListener('dragover', (event) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
  zone.classList.add('drag-over');
});

zone.addEventListener('dragleave', () => {
  zone.classList.remove('drag-over');
});

zone.addEventListener('drop', (event) => {
  event.preventDefault();               // stop the browser's default (e.g. opening a link)
  zone.classList.remove('drag-over');
  const id = event.dataTransfer.getData('text/plain');
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);            // move the element into the zone
});

💡 Why the double preventDefault? Think of the browser as having a "No Entry" sign on every element. preventDefault in dragover removes the sign so a drop is allowed; preventDefault in drop stops the browser's built-in behaviour (like navigating to a dropped link) so your code runs instead.

The dataTransfer Object

Every drag event carries a dataTransfer object — the courier that holds the payload and controls the visual effect.

You can store several formats at once, letting different targets read what they understand:

event.dataTransfer.setData('text/plain', 'Buy milk');
event.dataTransfer.setData('application/json',
  JSON.stringify({ id: 123, type: 'task' }));

Dropping Files

The killer feature: users can drag files straight from their file manager into your page. Dropped files land in event.dataTransfer.files as a FileList.

const zone = document.getElementById('file-zone');

// Prevent the browser from just opening the file
['dragover', 'drop'].forEach((name) =>
  zone.addEventListener(name, (e) => e.preventDefault()));

zone.addEventListener('drop', (event) => {
  const files = [...event.dataTransfer.files]; // FileList -> Array
  for (const file of files) {
    console.log(`${file.name} — ${formatSize(file.size)} — ${file.type}`);
    // In a real app: upload with FormData + fetch
    // const body = new FormData();
    // body.append('file', file);
    // await fetch('/upload', { method: 'POST', body });
  }
});

function formatSize(bytes) {
  if (bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
}

Hands-on: Two-Column Board

<div class="board">
  <ul class="column" id="todo">
    <li class="task" draggable="true" id="t1">Write tests</li>
    <li class="task" draggable="true" id="t2">Fix login bug</li>
  </ul>
  <ul class="column" id="done"></ul>
</div>

document.querySelectorAll('.task').forEach((task) => {
  task.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', task.id);
    e.dataTransfer.effectAllowed = 'move';
    task.classList.add('dragging');
  });
  task.addEventListener('dragend', () => task.classList.remove('dragging'));
});

document.querySelectorAll('.column').forEach((col) => {
  col.addEventListener('dragover', (e) => {
    e.preventDefault();               // enable dropping
    col.classList.add('drag-over');
  });
  col.addEventListener('dragleave', () => col.classList.remove('drag-over'));
  col.addEventListener('drop', (e) => {
    e.preventDefault();
    col.classList.remove('drag-over');
    const id = e.dataTransfer.getData('text/plain');
    col.appendChild(document.getElementById(id));
  });
});

Accessibility & Libraries

Drag and drop is mouse-shaped by nature, which makes it a common accessibility trap. A keyboard-only or touch user must be able to accomplish the same thing another way.

When to reach for a library

The native API is fine for simple cases, but production apps often want touch support, smooth animations, and accessibility baked in. Popular choices:

With SortableJS the earlier board becomes almost nothing:

import Sortable from 'sortablejs';

new Sortable(document.getElementById('todo'), {
  group: 'board',      // shared group lets items move between lists
  animation: 150,
  onEnd: (evt) => console.log('moved to index', evt.newIndex)
});

Summary & Quiz

📚 Further Reading

• MDN — HTML Drag and Drop API
• SortableJS documentation
• dnd kit — accessible DnD for React

🚀 What's Next?

You've now handled pointers, files, and direct manipulation. Next we shift from moving elements to drawing them: the fundamentals of SVG, where shapes are described in markup and scale crisply to any size.