How to implement HTML5 drag and drop

· Category: HTML & CSS

Short answer

HTML5 drag and drop relies on the draggable attribute and a suite of events: dragstart, dragover, drop, and dragend.

Steps

  1. Set draggable="true" on the element to drag.
  2. In dragstart, use event.dataTransfer.setData() to store payload data.
  3. Prevent the default action in dragover to allow dropping.
  4. In drop, read the data with dataTransfer.getData() and update the DOM.

Example

const items = document.querySelectorAll('.draggable');
const zone = document.querySelector('.dropzone');

items.forEach((item) => {
  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
  });
});

zone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

zone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  zone.appendChild(document.getElementById(id));
});

Tips

  • Add visual cues (opacity, borders) during dragenter and dragleave.
  • For complex UIs, consider libraries like react-beautiful-dnd or @dnd-kit.
  • Touch devices require polyfills or alternative libraries because native HTML5 DnD does not support touch.