HTML ondrop Attribute: This attribute is defined as it fires when an element is dragged and dropped on a valid drop target. The drag and drop is the common feature of HTML 5. And by default, the images and links are draggable. There are different events which are used and occur before the ondrop event.
- Events occur on the draggable target
- Events occur on the drop target.
HTML ondrop Attribute
This attribute can be applied to all the HTML elements.
Events occur on the draggable target
There are three events which are used to drag an element from the source location.
| EVENT | FUNCTIONALITY |
|---|---|
| ondragstart | It is used when the user starts to drag an element |
| ondrag | used to dragging an element |
| ondragend | used to finish the dragging of an element. |
Events occur on the drop of the target
The list of events which are used to drop an element is given below:
| EVENT | FUNCTIONALITY |
|---|---|
| ondragenter | dragged an element and enter into the valid drop target. |
| ondragover | when the dragged element is over the drop location. |
| ondragleave | when the dragged element leaves the drop target |
Browser Support
This attribute is supported by the following browsers:
- Chrome-4.0
- Firefox-3.5
- Internet Explorer-9.0
- Safari-6.0
- Opera-12.0
Example: for <div> element
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>Drag the p element back and forth between the two rectangles:</p>
<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 style="clear:both;"></p>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Started to drag the p element";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>
</body>
</html>
Output:
