ondragleaveEvent

Example

Execute JavaScript when a draggable element leaves the drop target:

More examples are included at the bottom of this article.

Definition and Usage

The ondragleave event is triggered when a draggable element or selected text leaves a 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 the draggable element enters and leaves the drop area.

Drag and drop is a very common feature in HTML5. For more information, see the HTML tutorial'sHTML5 Drag and Drop。

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

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

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

Events triggered on the drag source(source element):
- ondragstart- Triggered when the user starts dragging an element
- ondrag- Triggered while the element is being dragged
- ondragend- Triggered after the user completes dragging the element

Events triggered on the drop target:
- ondragenter- Triggered when the object being dragged by the mouse enters its container range
- ondragover- Triggered when a dragged object is dragged within the range of another object's container
- ondragleave - Triggered when the object being dragged by the mouse leaves its container range
- ondrop- Triggered when the mouse button is released during a drag process

Browser Support

The numbers in the table indicate the first browser version that supports this event.

Event
ondragleave	4.0	9.0	3.5	6.0	12.0

Syntax

In HTML:

<element ondragleave="myScript">Try it Yourself

In JavaScript:

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

In JavaScript, using the addEventListener() method:

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

Note:Internet Explorer 8 and earlier IE versions do not support theaddEventListener()method.

Technical Details

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

More Examples

Example

The following example demonstrates all the drag and drop events:

/* Triggered while dragging */
document.addEventListener("dragstart", function(event) {
//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 = "Starting to drag the p element.";
//Change the opacity of the dragged element
    event.target.style.opacity = "0.4";
});
//While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// When the p element has been dragged, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Completed dragging the p element";
    event.target.style.opacity = "1";
});
/* Triggered after dragging is completed */
// When the p element completes dragging and enters 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 element's default handling
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 in drop)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to obtain 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 Manual:HTML draggable attribute