|
Definition and UsageThe ondragenter attribute fires when a draggable element or text selection enters a valid drop target. The ondragenter and ondragleave events can help the user to understand that a draggable element is about to enter or leave a drop target. This can be done by, for example, setting a background color when the draggable element enters the drop target, and removing the color when the element is moved out of the target. To learn about Drag and Drop, read our HTML Tutorial on HTML5 Drag a nd 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 ondragenter 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 enters a drop target
Div Example.
index.html
Example:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
margin-right: 100px;
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)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" 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 dragEnter(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
document.getElementById("demo").innerHTML = "Entered the dropzone";
}
}
function dragLeave(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
document.getElementById("demo").innerHTML = "Left the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
let data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Output should be:
| html ondragenter attribute |
| How to Execute a JavaScript when a draggable element enters a drop target | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded by: | Admin |
Views: | 124 |
Reffered: https://www.w3schools.com/tags/att_ondragenter.asp