JavascriptHow-ToBeginner · 4 min read

How to Create Drag and Drop in JavaScript Easily

To create drag and drop in JavaScript, use the dragstart, dragover, and drop events on HTML elements. Set draggable="true" on the element you want to drag, then handle these events to move or copy the element where dropped.

📐

Syntax

Drag and drop in JavaScript uses these main events:

dragstart: Fires when dragging starts. Use it to set data to transfer.
dragover: Fires when a dragged item is over a drop target. Must call event.preventDefault() to allow dropping.
drop: Fires when the dragged item is dropped. Use it to handle the drop action.

Also, the draggable element must have draggable="true" attribute.

html

<div draggable="true" id="dragItem">Drag me</div>
<div id="dropZone">Drop here</div>

<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');

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');
  console.log('Dropped data:', data);
});
</script>

💻

Example

This example shows a box you can drag and drop into a target area. When dropped, the box moves inside the target.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drag and Drop Example</title>
<style>
  #dragItem {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
  }
  #dropZone {
    width: 300px;
    height: 150px;
    border: 2px dashed #888;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>

<div id="dragItem" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>

<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');

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

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

dropZone.addEventListener('drop', event => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  if (data === 'dragItem') {
    dropZone.appendChild(dragItem);
  }
});
</script>

</body>
</html>

Output

A green box labeled 'Drag me' can be dragged and dropped inside the dashed drop zone area, where it moves visually.

⚠️

Common Pitfalls

Common mistakes when creating drag and drop:

Not setting draggable="true" on the element to drag.
Forgetting to call event.preventDefault() in the dragover event, which blocks dropping.
Not using dataTransfer.setData and getData properly to identify dragged data.
Trying to move elements without appending them to the drop target.

javascript

/* Wrong: Missing draggable attribute */
<div id="dragItem">Drag me</div>

/* Right: Add draggable attribute */
<div id="dragItem" draggable="true">Drag me</div>

/* Wrong: Missing event.preventDefault() in dragover */
dropZone.addEventListener('dragover', event => {
  // event.preventDefault() missing
});

/* Right: Allow drop by preventing default */
dropZone.addEventListener('dragover', event => {
  event.preventDefault();
});

📊

Quick Reference

Drag and Drop event summary:

Event	Purpose	Important Notes
dragstart	Start dragging element	Use `dataTransfer.setData` to store data
dragover	Element is dragged over target	Call `event.preventDefault()` to allow drop
drop	Element is dropped on target	Use `dataTransfer.getData` to retrieve data and handle drop
dragend	Drag operation ends	Optional cleanup after drag

✅

Key Takeaways

Set draggable="true" on elements you want to drag.

Use dragstart to set data with event.dataTransfer.setData.

Call event.preventDefault() in dragover to allow dropping.

Handle drop event to move or copy the dragged element.

Test drag and drop in modern browsers supporting HTML5 API.