Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the dragged element is being dropped in HTML?
The ondrop event in HTML is triggered when a dragged element or text selection is dropped onto a valid drop target. This event is essential for implementing drag and drop functionality, allowing users to move elements between different areas of a webpage.
The ondrop event works in conjunction with other drag events like ondragstart, ondragover, and ondrag to create a complete drag and drop experience.
Syntax
Following is the syntax for the ondrop event −
<element ondrop="function(event)">content</element>
The ondrop event handler receives an event object that contains information about the drag operation, including the data being transferred.
Required Event Handlers for Drag and Drop
To implement drag and drop functionality, you need several event handlers −
ondragstart − Fired when the user starts dragging an element. Sets the data to be transferred.
ondragover − Fired when a dragged element is over a drop target. Must call
preventDefault()to allow dropping.ondrop − Fired when the dragged element is dropped. Handles the actual drop operation.
Basic Drag and Drop Example
Following example demonstrates a simple drag and drop implementation where text can be moved between containers −
<!DOCTYPE html>
<html>
<head>
<title>Basic Drag and Drop</title>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
}
.droptarget:hover {
background-color: #e9e9e9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">DRAG ME..!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="status"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("status").innerHTML = "Started to drag";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("status").innerHTML = "The object was dropped";
}
</script>
</body>
</html>
The output displays two containers where you can drag the text from the first to the second container −
[DRAG ME..!] [ ] Status: Started to drag (when dragging) Status: The object was dropped (after dropping)
Advanced Drag and Drop with Multiple Events
Following example demonstrates using multiple drag events including ondrag to provide feedback during the drag operation −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Drag and Drop</title>
<style>
.drag-container {
float: left;
width: 120px;
height: 60px;
border: 2px dashed #876587;
margin: 15px;
padding: 10px;
text-align: center;
background-color: #f0f0f0;
}
.drag-container.dragover {
background-color: #e0e0e0;
border-color: #555;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="drag-container" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag Me!</p>
</div>
<div class="drag-container" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)"></div>
<div id="feedback" style="margin: 20px; padding: 10px; border: 1px solid #ccc;">
Drag the element from left container to right container.
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("feedback").innerHTML = "Drag started - move to drop zone";
}
function dragging(event) {
document.getElementById("feedback").innerHTML = "Dragging in progress...";
}
function dragOver(event) {
event.preventDefault();
event.currentTarget.classList.add("dragover");
}
function dragLeave(event) {
event.currentTarget.classList.remove("dragover");
}
function drop(event) {
event.preventDefault();
event.currentTarget.classList.remove("dragover");
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("feedback").innerHTML = "Element dropped successfully!";
}
</script>
</body>
</html>
This example provides visual feedback by changing the container's appearance when an element is dragged over it, and updates the status message throughout the drag operation −
[Drag Me!] [ ] Feedback: Drag started - move to drop zone Feedback: Dragging in progress... (while dragging) Feedback: Element dropped successfully! (after drop)
Drag and Drop with Image Elements
Following example shows how to implement drag and drop with image elements −
<!DOCTYPE html>
<html>
<head>
<title>Image Drag and Drop</title>
<style>
.image-container {
width: 150px;
height: 100px;
border: 2px solid #333;
margin: 10px;
padding: 5px;
display: inline-block;
text-align: center;
background-color: #f5f5f5;
}
.image-container.highlight {
background-color: #ffeb3b;
border-color: #ff9800;
}
img {
max-width: 100%;
max-height: 100%;
cursor: move;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Drag and Drop Images</h3>
<div class="image-container" ondrop="dropImage(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiM0Q0FGNTASCZ8L3JlY3Q+PHRleHQgeD0iMjAiIHk9IjI1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIxMiI+SW1nPC90ZXh0Pjwvc3ZnPg==" draggable="true" ondragstart="dragStartImage(event)" id="image1" alt="Sample Image">
</div>
<div class="image-container" ondrop="dropImage(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
Drop Here
</div>
<p id="imageStatus">Drag the image to the right container.</p>
<script>
function dragStartImage(event) {
event.dataTransfer.setData("text/plain", event.target.id);
document.getElementById("imageStatus").innerHTML = "Image drag started";
}
function allowDrop(event) {
event.preventDefault();
}
function dragEnter(event) {
event.currentTarget.classList.add("highlight");
}
function dragLeave(event) {
event.currentTarget.classList.remove("highlight");
}
function dropImage(event) {
event.preventDefault();
event.currentTarget.classList.remove("highlight");
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
if (draggedElement && event.currentTarget !== draggedElement.parentNode) {
event.currentTarget.appendChild(draggedElement);
document.getElementById("imageStatus").innerHTML = "Image dropped successfully!";
}
}
</script>
</body>
</html>
This example demonstrates drag and drop functionality with images, including visual highlighting of drop zones −
Drag and Drop Images [Image] [Drop Here] Status: Image drag started (when dragging begins) Status: Image dropped successfully! (after successful drop)
Key Points
preventDefault() is crucial − You must call
event.preventDefault()in bothondragoverandondropevents to enable dropping.Data transfer − Use
event.dataTransfer.setData()to store data during drag andevent.dataTransfer.getData()to retrieve it during drop.draggable attribute
377 Views
