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 content */ 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 1.0
- Edge 12.0
- Internet Explorer 9.0
- Mozilla Firefox 9.0
- Safari 3.1
- Opera 12.0
Please Login to comment...