|
Definition and UsageThe ondragover attribute fires when a draggable element or text selection is being dragged over a valid drop target. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover attribute. 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:
Note: While dragging an element, the ondragover event fires every 350 milliseconds. Applies toThe ondragover 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 an element is being dragged over a drop target
Div Example.
index.html
Example:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#droptarget {
float: left;
width: 200px;
height: 35px;
margin: 55px;
margin-top: 155px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me into the rectangle!</p>
<div id="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);
}
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo").innerHTML = "The p element is OVER the droptarget.";
event.target.style.border = "4px dotted green";
}
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 ondragover attribute |
| How to Execute a JavaScript when an element is being dragged over a drop target | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded by: | Admin |
Views: | 225 |
Reffered: https://www.w3schools.com/tags/att_ondragover.asp