ondragenterEvent

Examples

Execute JavaScript when a dragged element enters a drop target:

More examples are included at the bottom of this article.

Definition and Usage

The ondragenter event fires when a dragged element or selected text enters a valid drop target.

The ondragenter and ondragleave events can help users better understand the process of a draggable element entering and leaving a 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 onHTML5 Drag and Drop。

Note:To make an element draggable, use the HTML5draggableattribute.

Tip:Links and images are draggable by default and do not need the draggable attribute.

The following events are triggered during the drag and drop process:

Events fired on the drag source(source element):
- ondragstart- Fired when the user starts dragging an element
- ondrag- Fired when an element is being dragged
- ondragend- Fired when the user completes the element drag

Events fired on the drop target:
- ondragenter - This event is fired when a mouse-dragged object enters its container range
- ondragover- This event is fired when a dragged object is dragged within the container range of another object
- ondragleave- This event is fired when a mouse-dragged object leaves its container range
- ondrop- This event is fired when the mouse button is released during a drag operation

Browser Support

The numbers in the table specify the first browser version that fully supports the event.

Event
ondragenter	4.0	9.0	3.5	6.0	12.0

Syntax

In HTML:

<element ondragenter="myScript">Try it Yourself

In JavaScript:

object.ondragenter=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

object.addEventListener("dragenter", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	DragEvent
Supported HTML tags:	All HTML elements

More Examples

Example

The following example demonstrates all the drag and drop events:

/* Fired when dragging */
document.addEventListener("dragstart", function(event) {
//The dataTransfer.setData() method sets the data type and the dragged data
    event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Start dragging the p element.";
// Modify 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";
});
// When the p element is dragged, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element";
    event.target.style.opacity = "1";
});
/* Fired after the drag is completed */
// When the p element is dragged into the droptarget, change the border style of the div
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 default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the border style of the div
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 are opened by default on drop)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to get the dragged data
The dragged data element id ("drag1")
Append the dragged 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 Yourself »

HTML Tutorial:HTML5 Drag and Drop

HTML Reference:HTML draggable Attribute