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
HTML ondrop Event Attribute
The HTML ondrop event attribute is triggered when a draggable element or text is dropped on a valid drop target in an HTML document. This event is part of the HTML5 drag and drop API, which enables interactive user interfaces where elements can be moved between different areas of a webpage.
Syntax
Following is the syntax for the ondrop event attribute −
<tagname ondrop="script"></tagname>
Where script is the JavaScript code to execute when the drop event occurs.
Parameters
The ondrop event handler receives an event object with the following key properties −
dataTransfer − Contains the data being dragged, accessible via methods like
getData()target − The element where the drop occurred
preventDefault() − Must be called to allow the drop operation
How Drag and Drop Works
The drag and drop operation involves multiple events working together −
Basic Drag and Drop Example
Following example demonstrates the basic usage of the ondrop event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML ondrop Event Example</title>
<style>
.drag-item {
width: 80px;
height: 80px;
background-color: #4CAF50;
border-radius: 10px;
margin: 10px;
display: inline-block;
cursor: move;
text-align: center;
line-height: 80px;
color: white;
font-weight: bold;
}
.drop-zone {
width: 200px;
height: 150px;
border: 3px dashed #ccc;
margin: 20px;
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 150px;
background-color: #f9f9f9;
}
.drop-zone.drag-over {
border-color: #4CAF50;
background-color: #e8f5e8;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Drag and Drop Demo</h2>
<p>Drag the green box to either drop zone:</p>
<div class="drag-item" draggable="true" ondragstart="dragStart(event)" id="item1">
Item
</div>
<div class="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
Drop Zone 1
</div>
<div class="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
Drop Zone 2
</div>
<p id="status">Ready to drag</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
document.getElementById("status").textContent = "Dragging started...";
}
function allowDrop(event) {
event.preventDefault();
}
function dragEnter(event) {
event.target.classList.add("drag-over");
}
function dragLeave(event) {
event.target.classList.remove("drag-over");
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
event.target.appendChild(draggedElement);
event.target.classList.remove("drag-over");
document.getElementById("status").textContent = "Item dropped successfully!";
}
</script>
</body>
</html>
The above example shows a draggable green box that can be moved between two drop zones. The drop zones highlight when an item is dragged over them.
Advanced Example with Data Transfer
Following example shows how to transfer custom data during drag and drop operations −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Drag and Drop with Data</title>
<style>
.product {
width: 120px;
padding: 15px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 8px;
display: inline-block;
cursor: move;
text-align: center;
background-color: #fff;
}
.cart {
width: 300px;
min-height: 200px;
border: 3px dashed #007bff;
margin: 20px;
padding: 20px;
background-color: #f8f9fa;
}
.cart-item {
background-color: #e7f3ff;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
border-left: 4px solid #007bff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Shopping Cart Drag and Drop</h2>
<div>
<h3>Products:</h3>
<div class="product" draggable="true" ondragstart="dragProduct(event)" data-name="Laptop" data-price="999">
<strong>Laptop</strong><br>$999
</div>
<div class="product" draggable="true" ondragstart="dragProduct(event)" data-name="Mouse" data-price="25">
<strong>Mouse</strong><br>$25
</div>
<div class="product" draggable="true" ondragstart="dragProduct(event)" data-name="Keyboard" data-price="75">
<strong>Keyboard</strong><br>$75
</div>
</div>
<div class="cart" ondrop="dropInCart(event)" ondragover="allowDrop(event)">
<h3>Shopping Cart (Drop items here)</h3>
<div id="cart-items"></div>
<div id="total"><strong>Total: $0</strong></div>
</div>
<script>
let cartTotal = 0;
function dragProduct(event) {
const name = event.target.getAttribute('data-name');
const price = event.target.getAttribute('data-price');
event.dataTransfer.setData("application/json", JSON.stringify({name: name, price: parseInt(price)}));
}
function allowDrop(event) {
event.preventDefault();
}
function dropInCart(event) {
event.preventDefault();
const productData = JSON.parse(event.dataTransfer.getData("application/json"));
const cartItems = document.getElementById('cart-items');
const newItem = document.createElement('div');
newItem.className = 'cart-item';
newItem.textContent = productData.name + ' - $' + productData.price;
cartItems.appendChild(newItem);
cartTotal += productData.price;
document.getElementById('total').innerHTML = '<strong>Total: $' + cartTotal + '</strong>';
}
</script>
</body>
</html>
This example demonstrates transferring structured data (product name and price) during the drag and drop operation, with the cart automatically calculating the total.
File Drop Example
The ondrop event can also handle file drops from the operating system −
<!DOCTYPE html>
<html>
<head>
<title>File Drop Example</title>
<style>
.file-drop-zone {
width: 400px;
height: 200px;
border: 3px dashed #ccc;
text-align: center;
line-height: 200px;
margin: 20px auto;
background-color: #fafafa;
border-radius: 10px;
}
.file-drop-zone.dragover {
border-color: #007bff;
background-color: #e7f3ff;
}
.file-info {
margin: 20px;
padding: 15px;
background-color: #f8f9fa;
border-left: 4px solid #28a745;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>File Drop Demo</h2& 
191 Views
