YouTipExample
Execute JavaScript when the dragged element enters the drop target:
Try it »More examples are available at the bottom of this page.
Definition and Usage
The ondragenter event is triggered when a dragged element or selected text enters a valid drop target.
The ondragenter and ondragleave events can help users understand better when a draggable element enters and leaves the drop area. You can set different background colors when a draggable element enters and leaves the drop area.
Drag and drop is a very common feature in HTML5. For more information, see our HTML tutorial on HTML5 Drag and Drop.
Note: To make an element draggable, you need to use the HTML5 draggable attribute.
Tip: Links and images are draggable by default, without the draggable attribute.
The following events are triggered during the drag and drop process:
- Events triggered on the drag target (source element):
- ondragstart - Triggered when the user starts dragging an element
- ondrag - Triggered while the element is being dragged
- ondragend - Triggered when the user has finished dragging the element
- Events triggered when releasing the target:
- ondragenter - Triggered when the object being dragged enters the container's range
- ondragover - Triggered when an object being dragged is within another object's container range
- ondragleave - Triggered when the object being dragged leaves the container's range
- ondrop - Triggered when the mouse button is released during a drag operation
Browser Support
The numbers in the table specify the first browser version that supports the event.
| Event | |||||
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
In HTML:
<_element_ ondragenter="_myScript_">Try it
In JavaScript:
_object_.ondragenter = function(){_myScript_};Try it
In JavaScript, using the addEventListener() method:
_object_.addEventListener("dragenter", _myScript_);Try it
Note: Internet Explorer 8 and earlier versions of IE do not support the addEventListener() method.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
More Examples
Example
The following example demonstrates all drag and drop events:
/* Triggered during dragging */
document.addEventListener("dragstart", function(event) {
// The setData() method sets the data type and value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging a p element
document.getElementById("demo").innerHTML = "Start dragging the p element.";
// Change the opacity of the dragged element
event.target.style.opacity = "0.4";
});
// Change the color of the output text while dragging the p element
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text and reset the opacity after dragging the p element
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element";
event.target.style.opacity = "1";
});
/* Triggered after dragging is complete */
// Change the border style of the div when the p element is dragged into droptarget
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. For drop, we must prevent the element's default handling
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Reset the border style of the div when the draggable p element leaves the droptarget
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* For drop, prevent the browser's default handling of data (links open by default in drop)
Reset the color of the output text and the border color of the DIV
Use the getData() method of dataTransfer to get the dropped data
The id of the dragged data element ("drag1")
Append the draggable element to the drop element */
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
Try it »
Related Pages
HTML Tutorial: HTML5 Drag and Drop
HTML Reference Manual: HTML draggable Attribute