HTML Tutorial

HTML Drag & Drop API

The HTML Drag & Drop API lets users drag elements (or data) and drop them somewhere else on the page. It’s widely used for reordering lists, file uploads, building kanban boards, and interactive UIs.

Below is a compact, practical guide you can use on your Learn2Kode tutorial page: explanation, events, attributes, accessibility tips, and a working example.

1. Key concepts & events

Important events:

dragstart — fired when drag begins (set data, style).
drag — fired while dragging.
dragenter — when dragged item enters a drop target.
dragover — repeatedly fired while item is over a target; must call event.preventDefault() to allow drop.
dragleave — when dragged item leaves a target.
drop — when item is dropped on a target; read data and perform action.
dragend — when drag operation ends (cleanup).

2. Minimal working example (HTML + CSS + JavaScript)

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Drag & Drop Example</title>
  <style>
    .container { display:flex; gap:20px; padding:20px; }
    .box {
      width:220px; min-height:150px;
      border:2px dashed #99a; padding:10px; border-radius:6px;
      background:#f8faff;
    }
    .item {
      padding:10px 12px; margin:8px 0;
      background:#fff; border:1px solid #ddd; border-radius:4px;
      cursor:grab;
    }
    .item:active { cursor:grabbing; }
    .over { background:#e6f7ff; border-color:#4aa3ff; }
  </style>
</head>
<body>

<h1>Drag & Drop Demo</h1>

<div class="container">
  <!-- Draggable source -->
  <div class="box" id="source">
    <h3>Available Items</h3>
    <div class="item" draggable="true" id="item1">Item 1</div>
    <div class="item" draggable="true" id="item2">Item 2</div>
    <div class="item" draggable="true" id="item3">Item 3</div>
  </div>

  <!-- Drop target -->
  <div class="box" id="target">
    <h3>Drop Here</h3>
    <p style="color:#666;font-size:14px">Drop items from the left box into this box.</p>
  </div>
</div>

<script>
  // set up dragstart on items
  document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('dragstart', (e) => {
      // set id as transfer data
      e.dataTransfer.setData('text/plain', e.target.id);
      // optional: set drag image or effect
      e.dataTransfer.effectAllowed = 'move';
      e.target.style.opacity = '0.6';
    });

    item.addEventListener('dragend', (e) => {
      e.target.style.opacity = ''; // cleanup
    });
  });

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

  // necessary to allow dropping
  target.addEventListener('dragover', (e) => {
    e.preventDefault();            // allow drop
    e.dataTransfer.dropEffect = 'move';
    target.classList.add('over');
  });

  target.addEventListener('dragleave', () => {
    target.classList.remove('over');
  });

  target.addEventListener('drop', (e) => {
    e.preventDefault();            // prevent browser default handling
    target.classList.remove('over');

    // read transferred data (the id of the dragged element)
    const id = e.dataTransfer.getData('text/plain');
    const dragged = document.getElementById(id);

    // append dragged node into drop target (moves the element)
    if (dragged) {
      target.appendChild(dragged);
    }
  });
</script>

</body>
</html>

Drag & Drop Example

Drag & Drop Demo

Available Items

Item 1

Item 2

Item 3

Drop Here

Drop items from the left box into this box.

What this does:

3. Common patterns & tips

Data types : dataTransfer.setData('text/plain', value) is simplest. You can also use custom MIME types (text/html, text/uri-list, application/json) but beware cross-origin restrictions.
Drag feedback : use e.dataTransfer.setDragImage(img, x, y) to customize the drag ghost image.
Effect hints : set e.dataTransfer.effectAllowed (copy, move, link) in dragstart and e.dataTransfer.dropEffect in dragover to hint supported operations.
Reordering lists : store index or id; on drop, insert in the desired position using insertBefore.
Files upload : use or handle drop on file drop targets and read e.dataTransfer.files.

4. Accessibility & keyboard support

Drag & Drop API is mouse/touch-centric — for accessibility you must provide keyboard equivalents:

Allow keyboard users to select an item and press an action (e.g., Enter or Space) to “pick up” and then move to a target and press again to “drop.”
Announce state changes with ARIA live regions.
Use ARIA attributes: role="listbox", role="option", aria-grabbed="true|false", and manage focus properly.
Provide alternative controls (buttons) to move items (e.g., “Move to X” buttons) so users who cannot drag can still perform actions.

5. Touch support

Native Drag & Drop support on mobile browsers is inconsistent. For touch devices, implement touch event fallbacks (touchstart, touchmove, touchend) or use libraries that unify drag across devices (e.g., SortableJS, interact.js).

6. Security & cross-origin notes

7. Libraries (when to use)

If you want sortable lists, multi-touch support, or advanced features with minimal code, consider a lightweight library:

8. Quick reference table (events)