Last Updated : 11 Jul, 2025
Drag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it. This allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there.
With HTML5, implementing drag-and-drop functionality has become easier and more streamlined, as it supports built-in drag-and-drop events. These events can be applied to any element with minimal coding.
Drag and Drop EventsEvents
Description
Triggered when an element or text selection is being dragged.
Initiates the drag operation and specifies the data to be dragged using drag(event).
Determines if the drop target will accept the drop. If accepted, the event must be canceled.
Occurs when the mouse leaves the element before a valid drop target is identified.
Specifies where the dragged data can be dropped, and prevents default behavior.
Fires when the dropped item lands in the target area.
Occurs after the drag operation is finished.
The Data Transfer ObjectThe dataTransfer object plays a crucial role in managing the data during a drag and drop operation. It holds the data being dragged and transfers it to the desired drop location. Here are some key properties and methods of the dataTransfer object:
Property
Description
dataTransfer.setData(format, data)
Sets the data to be dragged.
dataTransfer.clearData(format)
Clears data, if a format is specified, it removes only that specific data.
dataTransfer.getData(format)
Returns data of the specified format; returns an empty string if no data.
dataTransfer.types
Returns an array of all formats set during dragstart.
dataTransfer.files
Returns all files to be dropped.
dataTransfer.setDragImage(element, x, y)
Displays an existing image during drag, with coordinates for drop location
dataTransfer.addElement(element)
Adds the specified element as a drag feedback image.
dataTransfer.effectAllowed(value)
Specifies allowed operations for the user: none, copy, link, move, etc.
dataTransfer.dropEffect(value)
Controls feedback during dragenter/dragover events, indicating operation type: none, copy, link, move.
Approach for Implementing Drag and Drop in HTMLTo implement drag and drop functionality in HTML, follow these steps:
1. Make an Element Draggable: Use the draggable="true" attribute to make an element draggable.
<img draggable="true" src="image.png">
2. Define Drag Behavior: Use the ondragstart event to specify the data being dragged by calling a function (drag(event)), which sets the data using event.dataTransfer.setData().
<img draggable="true" src="image.png" ondragstart="drag(event)">
3. Enable Drop Target: Use the ondragover event on the drop target, and prevent the default behavior using event.preventDefault() to allow the drop.
<div ondragover="event.preventDefault()"></div>
4. Handle the Drop: Use the ondrop event to perform the drop action, typically retrieving the dragged data and placing it in the drop zone.
<div ondrop="drop(event)"></div>Examples Showing Drag and Drop in HTML 1. Drag and Drop of Image in HTML:
Example: This example shows the drag & drop of an image in HTML.
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#getData {
width: 250px;
height: 200px;
padding: 10px;
border: 1px solid #4f4d4d;
}
</style>
<script>
function allowDrop(even) {
even.preventDefault();
}
function drag(even) {
even.dataTransfer.setData("text", even.target.id);
}
function drop(even) {
even.preventDefault();
var fetchData = even.dataTransfer.getData("text");
even.target.appendChild(document.getElementById(fetchData));
}
</script>
</head>
<body>
<h3>Drag the GeekforGeeks image into the rectangle:</h3>
<div id="getData"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<img id="dragData"
src="gfg.png"
draggable="true"
ondragstart="drag(event)"
width="250"
height="200">
</body>
</html>
Output:
Dragging the image into the box 2. Implementation of Draggable Property:Example: This example shows the drag & drop of an image in HTML.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop box</title>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
let data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#box {
margin: auto;
width: 50%;
height: 200px;
border: 3px solid green;
padding: 10px;
}
#box1,
#box2,
#box3 {
float: left;
margin: 5px;
padding: 10px;
}
#box1 {
width: 50px;
height: 50px;
background-color: #F5B5C5;
}
#box2 {
width: 100px;
height: 100px;
background-color: #B5D5F5;
}
#box3 {
width: 150px;
height: 150px;
background-color: #BEA7CC;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.gfg {
font-size: 40px;
color: #009900;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Drag and drop of boxes</p>
<div id="box">
<div id="box1" draggable="true"
ondragstart="dragStart(event)">
</div>
<div id="box2" draggable="true"
ondragstart="dragStart(event)">
</div>
<div id="box3" ondrop="dragDrop(event)"
ondragover="allowDrop(event)">
</div>
</div>
</body>
</html>
Output:
3. Using Image Drag and Drop:Example: Implementation of Drop and Drop in HTMl using the Images.
HTML
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
.div1 {
width: 240px;
height: 75px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
}
p {
font-size: 20px;
font-weight: bold;
}
.gfg {
font-size: 40px;
color: #009900;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Image Drag and Drop in boxes</p>
<div class="div1"
ondrop="dragDrop(event)"
ondragover="allowDrop(event)">
<img id="drag1"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
draggable="true"
ondragstart="dragStart(event)"
width="220"
height="70">
</div>
<br>
<div class="div1"
ondrop="dragDrop(event)"
ondragover="allowDrop(event)">
</div>
</body>
</html>
Output:
4. Dragging Using Text in Rectangular Box:Example: Implementation of dragging the text in the rectangular box.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Text</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.dropbox {
width: 350px;
height: 40px;
padding: 15px;
border: 1px solid #292828;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
h1 {
color: green;
margin-bottom: 10px;
}
p {
margin: 0;
cursor: grab;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Drag the text into the rectangle</h3>
<div class="dropbox"
ondrop="droppoint(event)"
ondragover="allowDropOption(event)">
</div>
<p id="drag1"
draggable="true"
ondragstart="dragpoint(event)">
GeeksforGeeks: A computer science portal for geeks.
</p>
<script>
function droppoint(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
}
function allowDropOption(event) {
event.preventDefault();
}
function dragpoint(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
</script>
</body>
</html>
Output:
Supported Browser:RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4