HTML | ondragleave Event Attribute
The ondragleave attribute works when a draggable element or text selection leaves a valid drop target. It helps in dragging the elements and is entering or leaving a drop target. Drag and drop feature is very popular in HTML 5. Use CSS property when the element is draggable and enter into the drop target.
Supported Tags: It supports all HTML rags.
Syntax:
<element ondragleave = "script">
Attribute Value: The ondragleave event attribute contains single value script which works when ondragleave event called.
Note: Images and links are by default draggable.
Example:
html
<!DOCTYPE HTML><html> <head> <title>ondragleave event attribute</title> <style> .droptarget { width: 250px; height: 100px; margin: 15px; padding: 5px; border: 2px solid black; color:Green; } </style> <script> /* Function to start drag contenr */ function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } /* Function to dragenter event */ function dragEnter(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "2px solid green"; document.getElementById("demo").innerHTML = "Dropzone"; } } /* Function to dragleave event */ function dragLeave(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; document.getElementById("demo").innerHTML = "Out of Dropzone"; } } /* Function to allow drop content */ function allowDrop(event) { event.preventDefault(); } /* Function to drop content */ function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); } </script> </head> <body> <center> <h1> Drag the element between the boxes </h1> <!-- Drag and drop event starts with ondragleave events --> <div class = "droptarget" ondrop = "drop(event)" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondragover = "allowDrop(event)"> <h1 ondragstart = "dragStart(event)" draggable = "true" id = "dragtarget"> GeeksforGeeks </h1> </div> <div class = "droptarget" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondrop = "drop(event)" ondragover = "allowDrop(event)"> </div> <!-- Drag and drop events ends --> <p style="clear:both;"></p> <p id="demo"></p> </center> </body></html> |
Output:
Supported Browsers: The browser supported by ondragleave event attributes are listed below:
- Google Chrome 4.0
- Internet Explorer 9.0
- Mozilla Firefox 3.5
- Safari 6.0
- Opera 12.0
.png)