What is the Drag and Drop API? | HTML Interview Questions

What You'll Learn

Making elements draggable
Handling drag events
Creating drop zones

Basic Setup

index.htmlHTML

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

<!-- Drop zone -->
<div id="dropzone">Drop here</div>

Key Events

Event	When
`dragstart`	Drag begins
`drag`	During drag
`dragend`	Released
`dragover`	Over drop zone
`drop`	Dropped

JavaScript

code.jsJavaScript

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

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

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault(); // Required to allow drop
});

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

Important

preventDefault() on dragover is required to allow dropping.