The ondrop event attribute is used to drag an element or text and drop it into a valid droppable location or target. The drag and drop is a common feature of HTML 5.
Note: By default, the images and links are draggable.
There are different events that are used and occur before ondrop event.
- Events occur on the draggable target
- Events occur on the drop target:
Supported Tags: It supports all HTML tags.
Events occur on the draggable target: There are three events that are used to drag an element from the source location.
| Event |
Functionality |
| ondragstart |
This event is used when the user starts to drag an element. |
| ondrag |
The ondrag event is used to drag an element. |
| ondragend |
This event is used to finish the dragging of an element. |
Events occur on the drop of the target: The list of events that are used to drop an element is given below:
| Event |
Functionality |
| ondragenter |
This event is used to drag an element and enter into the valid drop target. |
| ondragover |
This event is used when the dragged element is over the drop location. |
| ondragleave |
This event occurs when the dragged element leaves the drop target. |
| ondrop |
This event occurs when the dragged element is dropped on the drop target. |
Example: In this example, we will use ondrop event attribute
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML ondrop Event Attribute
</title>
<style>
/* CSS property to create box */
#geeks {
width: 220px;
height: 120px;
padding: 15px;
border: 3px solid #4cb96b;
}
</style>
<script>
/* script to allow drop of element */
function allowDrop(gg) {
gg.preventDefault();
}
/* script to drag an element */
function drag(gg) {
gg.dataTransfer.setData("text", gg.target.id);
}
/* script to drop an element */
function drop(gg) {
gg.preventDefault();
var data =
gg.dataTransfer.getData("text");
gg.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drop the image into the rectangle:</p>
<div id="geeks" ondrop="drop(event)"
ondragover="allowDrop(event)">
</div><br>
<img id="gfg"
src=
draggable="true"
ondragstart="drag(event)" alt="" />
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML ondrop Event Attribute are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 9.0
- Safari 3.1
- Opera 12.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Jun, 2023
Like Article
Save Article