HtmlHow-ToBeginner · 4 min read

How to Use Drag and Drop in HTML: Simple Guide

To use drag and drop in HTML, add the draggable="true" attribute to elements you want to drag, then handle events like dragstart, dragover, and drop in JavaScript to control the behavior. Use event.dataTransfer to transfer data during dragging.

📐

Syntax

Drag and drop in HTML involves these key parts:

draggable="true": Makes an element draggable.
dragstart event: Fires when dragging starts; use it to set data.
dragover event: Fires when a dragged item is over a drop target; must call event.preventDefault() to allow dropping.
drop event: Fires when the dragged item is dropped; use it to handle the drop action.

html

<div draggable="true" id="drag-item">Drag me</div>
<div id="drop-zone">Drop here</div>

<script>
const dragItem = document.getElementById('drag-item');
const dropZone = document.getElementById('drop-zone');

dragItem.addEventListener('dragstart', event => {
  event.dataTransfer.setData('text/plain', 'This text is dragged');
});

dropZone.addEventListener('dragover', event => {
  event.preventDefault(); // Allow drop
});

dropZone.addEventListener('drop', event => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  dropZone.textContent = 'Dropped: ' + data;
});
</script>

Output

A draggable box labeled 'Drag me' and a drop area labeled 'Drop here'. When you drag the box and drop it on the drop area, the drop area text changes to 'Dropped: This text is dragged'.

💻

Example

This example shows a blue box you can drag and drop into a gray box. When dropped, the gray box text updates to confirm the drop.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
  #drag-item {
    width: 100px;
    height: 100px;
    background-color: #007BFF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: grab;
    margin-bottom: 20px;
  }
  #drop-zone {
    width: 150px;
    height: 150px;
    border: 2px dashed #666;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: bold;
  }
</style>
</head>
<body>

<div id="drag-item" draggable="true">Drag me</div>
<div id="drop-zone">Drop here</div>

<script>
const dragItem = document.getElementById('drag-item');
const dropZone = document.getElementById('drop-zone');

dragItem.addEventListener('dragstart', event => {
  event.dataTransfer.setData('text/plain', 'Blue box');
  event.dataTransfer.effectAllowed = 'move';
});

dropZone.addEventListener('dragover', event => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
});

dropZone.addEventListener('drop', event => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  dropZone.textContent = 'Dropped: ' + data;
  dropZone.style.borderColor = '#007BFF';
  dropZone.style.color = '#007BFF';
});
</script>

</body>
</html>

Output

A blue square labeled 'Drag me' above a dashed gray square labeled 'Drop here'. Dragging the blue square onto the gray area changes the gray area text to 'Dropped: Blue box' and changes its border and text color to blue.

⚠️

Common Pitfalls

Common mistakes when using drag and drop include:

Not setting draggable="true" on the element you want to drag.
Forgetting to call event.preventDefault() in the dragover event, which blocks dropping.
Not using dataTransfer.setData and getData properly to transfer data.
Trying to drag elements without proper CSS cursor or user-select settings, making dragging confusing.

html

<!-- Wrong: Missing event.preventDefault() in dragover -->
<div draggable="true" id="drag">Drag me</div>
<div id="drop">Drop here</div>
<script>
  const drag = document.getElementById('drag');
  const drop = document.getElementById('drop');
  drag.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', 'data');
  });
  drop.addEventListener('dragover', e => {
    // Missing e.preventDefault() here
  });
  drop.addEventListener('drop', e => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    drop.textContent = 'Dropped: ' + data;
  });
</script>

<!-- Right: Added event.preventDefault() in dragover -->
<div draggable="true" id="drag2">Drag me</div>
<div id="drop2">Drop here</div>
<script>
  const drag2 = document.getElementById('drag2');
  const drop2 = document.getElementById('drop2');
  drag2.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', 'data');
  });
  drop2.addEventListener('dragover', e => {
    e.preventDefault(); // Allows drop
  });
  drop2.addEventListener('drop', e => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    drop2.textContent = 'Dropped: ' + data;
  });
</script>

📊

Quick Reference

Remember these key points for drag and drop:

Make draggable: Add draggable="true" to elements.
dragstart: Use event.dataTransfer.setData() to store data.
dragover: Call event.preventDefault() to allow dropping.
drop: Use event.dataTransfer.getData() to retrieve data and handle the drop.
Styling: Use CSS cursor and user-select for better UX.

✅

Key Takeaways

Add draggable="true" to elements you want to drag.

Always call event.preventDefault() in dragover to allow dropping.

Use event.dataTransfer.setData and getData to transfer data during drag and drop.

Style draggable elements with cursor and user-select for better user experience.

Test drag and drop in modern browsers as behavior can vary slightly.