Drag and Drop is a powerful feature in HTML5 that allows users to move elements interactively on a webpage. It is supported in all modern browsers:
- Chrome (since version 6)
- Firefox (since version 3.5)
- Internet Explorer (since version 7)
- Android (since version 2.1)
Use Cases
Drag and Drop is primarily used for:
- Moving elements within a webpage.
- Uploading files by dragging them from the system to the browser.
In this guide, we focus on moving elements within a webpage.
Implementation Steps
The implementation involves three main steps:
- Making an element draggable.
- Handling the dragstart event.
- Handling the dragover and drop events on the target element.
Step 1: Make an Element Draggable
To make an element draggable, set the draggable=”true” attribute.
<img src="images/example.jpg" id="draggable-img" draggable="true">Step 2: Handle the Drag Start Event
When a user starts dragging the element, the dragstart event is triggered. We store the element’s ID in dataTransfer to retrieve it later.
document.getElementById("draggable-img").addEventListener("dragstart", e => {
e.dataTransfer.setData("text/plain", e.target.id)
})Step 3: Handle the Drag Over and Drop Events
To allow an element to receive dragged items, we must prevent the default behavior in the dragover event.
Then, in the drop event, we retrieve the dragged element and append it to the target.
const dropZone = document.getElementById("drop-area")
dropZone.addEventListener("dragover", e => {
e.preventDefault()
})
dropZone.addEventListener("drop", e => {
e.preventDefault()
const id = e.dataTransfer.getData("text/plain")
const draggedElement = document.getElementById(id)
if (draggedElement) e.target.appendChild(draggedElement)
})Final 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>
#drop-area {
width: 300px;
height: 200px;
border: 2px dashed #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
}
img {
width: 100px;
cursor: grab;
}
</style>
</head>
<body>
<img src="images/example.jpg" id="draggable-img" draggable="true">
<div id="drop-area">Drop here</div>
<script>
document.getElementById("draggable-img").addEventListener("dragstart", e => {
e.dataTransfer.setData("text/plain", e.target.id)
})
const dropZone = document.getElementById("drop-area")
dropZone.addEventListener("dragover", e => {
e.preventDefault()
})
dropZone.addEventListener("drop", e => {
e.preventDefault()
const id = e.dataTransfer.getData("text/plain")
const draggedElement = document.getElementById(id)
if (draggedElement) e.target.appendChild(draggedElement)
})
</script>
</body>
</html>
