A global event handler
for the dragleave
event.
var dragleaveHandler = targetElement.ondragleave;
dragleaveHandler
targetElement
.This example demonstrates using the ondragleave
attribute handler to set an element's dragleave
event handler.
<!DOCTYPE html> <html lang=en> <title>Examples of using the Drag and Drop Global Event Attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragStart"); // Change the source element's border to signify drag has started ev.currentTarget.style.border = "dashed"; ev.dataTransfer.setData("text", ev.target.id); } function dragover_handler(ev) { console.log("dragOver"); // Change the target element's background color to signify a drag over event // has occurred ev.currentTarget.style.background = "lightblue"; ev.preventDefault(); } function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function dragenter_handler(ev) { console.log("dragEnter"); // Change the source element's background color for enter events ev.currentTarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragLeave"); // Change the source element's background color back to white ev.currentTarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragEnd"); // Change the target element's background color to visually indicate // the drag ended. var el=document.getElementById("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragExit"); // Change the source element's background color back to green to signify a dragexit event ev.currentTarget.style.background = "green"; } function init() { // Set handlers for the source's enter/leave/end/exit events var el=document.getElementById("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>Examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body> </html>
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'ondragleave' in that specification. | Living Standard | |
HTML 5.1 The definition of 'ondragleave' in that specification. | Recommendation | Initial definition |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 3.5 (1.9.1) | 10 | 12 | 3.1 |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | 10 | No support | No support |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave