ondragleave Event

DOM Events DragEvent

Definition and usage

The ondragleave event occurs when a draggable element or text selection leaves the valid drop target.

ondragenter and ondragleave events can help users understand that a draggable element is about to enter or leave the drop target. For example, you can set the background color when the draggable element enters the drop target and remove the color when the element leaves the target.

Drag-and-drop is a very common feature in HTML5. It is when you 'grab' an object and drag it to a different location. For more information, please read our about HTML5 Drag and DropHTML tutorial.

Note:To make an element draggable, use the global HTML5 draggable attribute.

Tip:By default, links and images are draggable and do not require the draggable attribute.

Many events are used at different stages of the drag-and-drop operation, and may occur:

Events triggered on the draggable target (source element):

  • ondragstart - Occurs when the user starts dragging the element
  • ondrag - Occurs when the element is dragged
  • ondragend - Occurs when the user completes dragging the element

Events triggered on the drop target:

  • ondragenter - Occurs when the dragged element enters the drop target
  • ondragover - Occurs when the dragged element is on the drop target
  • ondragleave - Occurs when the dragged element leaves the drop target
  • ondrop - Occurs when the dragged element is placed on the drop target

Example

Execute JavaScript when a draggable element is moved out of the drop target:

<div ondragleave="myFunction(event)"></div>

Try It Yourself

More TIY examples are at the bottom of the page.

Syntax

In HTML:

<element ondragleave="myScript">

Try It Yourself

In JavaScript:

object.ondragleave = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("dragleave", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical Details

Bubble: Supported
Cancellable: Not supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM Version: Level 3 Events

Browser Support

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

Event Chrome IE Firefox Safari Opera
ondragleave 4.0 9.0 3.5 6.0 12.0

Example

Demonstration of all possible drag and drop events:

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- Events triggered on the drag target ----------------- */
document.addEventListener("dragstart", function(event) {
  // The dataTransfer.setData() method sets the data type and value of the data being dragged
  event.dataTransfer.setData("Text", event.target.id);
  // Output some text when the p element starts to be dragged
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // Change the opacity of the draggable element
  event.target.style.opacity = "0.4";
});
// Change the output text color when dragging the p element
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// After 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";
});
/* ----------------- Events Triggered on Drop Target ----------------- */
// When the draggable p element enters the droptarget, change the DIV border style
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// By default, data/elements cannot be dropped on other elements. To allow dropping, 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 DIV border style
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - Prevent the browser's default handling of data (default action is to open as a link when dropped)
Reset the output text color and the DIV border color
Use the dataTransfer.getData() method to get the dragged data
The dragged data is the id of the draggable element ("drag1")
Attach 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));
  }
});
</script>

Try It Yourself

Related Pages

HTML Tutorial: HTML5 Drag and Drop

HTML Reference Manual: HTML draggable attribute

DOM Events DragEvent