|
Definition and UsageThe ondrop attribute fires when a draggable element or text selection is dropped on a valid drop target. To learn about Drag and Drop, read our HTML Tutorial on HTML5 Drag and Drop. Tip: Links and images are draggable by default, and do not need the draggable attribute. There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:
Applies toThe ondrop attribute is part of the Event Attributes, and can be used on any HTML elements.
Browser SupportThe numbers in the table specify the first browser version that fully supports the event attribute.
|
How to Execute a JavaScript when a draggable element is dropped in a <div> element - HTML ondrop Attribute
Div Example. Drag the p element back and forth between the two rectangles.
index.html
Example:
HTML
<!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;" 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();
let data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>
</body>
</html>
Output should be:
| html ondrop attribute |
| How to Execute a JavaScript when a draggable element is dropped in a <div> element - HTML ondrop Attribute | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded by: | Admin |
Views: | 157 |
Reffered: https://www.w3schools.com/tags/att_ondrop.asp