HTML event attribute ondragenter
The ondragenter attribute event is triggered
when a draggable element or text selection enters a valid drop target.
To make an element draggable, mark that element
with the global HTML5 draggable attribute.
Links and images are draggable by default.
Events fired on the draggable source element:
- ondragstart - starting dragging
- ondrag - during the dragging
- ondragend - finish dragging
Events fired on the drop target:
- ondragenter - when the dragged element enters the droppable target
- ondragover - when the dragged element is over the droppable target
- ondragleave - when the dragged element leaves the droppable target
- ondrop - when the dragged element is dropped on the droppable target
What's new in HTML5
The ondragenter attribute is new in HTML5.
Syntax
<element ondragenter="script">
Supported Tags
ALL HTML elements
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
ondragenter |
Yes | 9.0 | Yes | Yes | Yes |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {<!--from w w w. j av a 2s .com-->
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)"
ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)"
ondrag="dragging(event)"
draggable="true"
id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"
ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragEnter(event) {
console.log("enter");
}
function dragging(event) {
console.log("being dragged");
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
console.log("dropped");
}
</script>
</body>
</html>