iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Drag and Drop

By · Reviewed & last updated · Part of HTML Tutorial

HTML5 drag-and-drop lets you make any element draggable and any other element a drop target. The browser handles the visual drag preview; you handle what happens on drop.

Three pieces

  1. Make it draggable. Add draggable="true" to the element.
  2. Listen for drag events. dragstart, dragend on the source; dragover, drop on the target.
  3. Pass data via dataTransfer. Set it in dragstart, read it in drop.

Drag-and-drop events

EventFires onUse for
dragstartThe sourceSet data on event.dataTransfer.
dragoverThe targetCall event.preventDefault() to allow drop.
dragenter / dragleaveThe targetHighlight / unhighlight on hover.
dropThe targetRead data from event.dataTransfer and act on it.
dragendThe sourceClean up after the operation finishes.

Minimal example

// HTML: <div id="src" draggable="true">Drag me</div>
//       <div id="dest">Drop here</div>
src.addEventListener('dragstart', e => e.dataTransfer.setData('text', src.id));
dest.addEventListener('dragover',  e => e.preventDefault());
dest.addEventListener('drop', e => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    dest.appendChild(document.getElementById(id));
});
Tip: For drag-and-drop file uploads, listen for drop on a target and read event.dataTransfer.files — a FileList identical to the one you'd get from an <input type="file">.

Example

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Drag and Drop</title>
</head>
<body>

<h1>HTML Drag and Drop</h1>
<p>This is a demo page for the "HTML Drag and Drop" lesson.</p>

</body>
</html>
Try it Yourself »

Exercise

Make this element draggable with one attribute.

<div ="true">Drag me</div>

Test yourself

Q1. Make an element draggable with…
Q2. Drop target must…
Q3. Move data between elements via…

Discussion

Loading…