HTML - Drag & Drop API

Overview

Estimated time: 20–30 minutes

Example

<div id="drag" draggable="true">Drag me</div>
<div id="drop" style="border:1px dashed #888;padding:10px">Drop here</div>
<script>
  const drag = document.getElementById('drag');
  const drop = document.getElementById('drop');
  drag.addEventListener('dragstart', e => e.dataTransfer.setData('text/plain', 'payload'));
  drop.addEventListener('dragover', e => e.preventDefault());
  drop.addEventListener('drop', e => { e.preventDefault(); drop.textContent = e.dataTransfer.getData('text/plain'); });
</script>

Common Pitfalls

• No keyboard alternative—consider buttons with JS handlers.