YouTipEvent Ondragleave
[ Event Object](#)
## Examples
Execute JavaScript when a draggable element leaves a drop target:
[Try it »](#)
More examples are included at the bottom of this page.
* * *
## 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. More information can be found in our HTML tutorial (#).
**Note:** To make an element draggable, the HTML5 (#) attribute is required.
**Tip:** Links and images are draggable by default and do not require the draggable attribute.
The following events are triggered during a drag and drop operation:
* **Events triggered on the drag target (source element):**
- Triggered when the user starts dragging an element.
- Triggered while an element is being dragged.
- Triggered after the user finishes dragging the element.
* **Events triggered when releasing the target:**
- Triggered when a dragged object enters the bounds of its container.
- Triggered when a dragged object is being dragged over another object's container bounds.
* ondragleave - Triggered when a dragged object leaves the bounds of its container.
- Triggered 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 | | | | | |
| --- | --- | --- | --- | --- | --- |
| ondragleave | 4.0 | 9.0 |:
object.ondragleave=function(){myScript};(#)
In JavaScript, using the addEventListener() method:
object.addEventListener("dragleave", myScript);(#)
**Note:** Internet Explorer 8 and earlier versions do not support the [addEventListener()](#) method.
* * *
Technical Details
| Bubbles: | Yes |
| --- |
| Cancelable: | No |
| Event Type: | DragEvent |
| Supported HTML Tags: | All HTML elements |
* * *
## More Examples
## Example
The following example demonstrates all drag and drop events:
/* Events triggered during dragging*/
document.addEventListener("dragstart", function(event) {
//The dataTransfer.setData() method sets the data type and the data to be dragged
event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started dragging 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 finished dragging the p element, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging p element";
event.target.style.opacity = "1";
});
/* Events triggered after dragging completes */
// When the p element finishes dragging and enters 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 div's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/*For drop, prevent the browser's default handling of data (the link opens by default in 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 is the 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 »](#)
* * *
## Related Pages
HTML Tutorial: (#)
HTML Reference: (#)
[ Event Object](#)