HTML | DOM ondragleave Event
The ondragleave event occurs when a draggable element or text selection leaves a valid drop target.
The ondragenter and ondragleave events can help the user to understand dropzone.
There are some events that are used and occurred in the different stages of a drag and drop operation:
- ondragstart: occurs when dragging of an element started.
- ondrag: occurs while an element is dragging.
- ondragend: occurs when dragging of an element finished.
- ondragenter: occurs when the dragged element entered into the drop target.
- ondragover: occurs when the dragged element is over the drop target.
- ondragleave: occurs when the dragged element leaves from the drop target.
- ondrop: occurs when the dragged element is dropped on the drop target.
Supported Tags: It supports all HTML elements.
Syntax:
In HTML:
<element ondragleave="myScript">
In JavaScript:
object.ondragleave = function(){myScript};In JavaScript, using the addEventListener() method:
object.addEventListener("dragleave", myScript);Example 1: Using HTML
html
<!DOCTYPE HTML><html><head> <title> HTML DOM ondragleave Event </title> <style> .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </style></head><body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM ondragleave Event</h2> <div class="droptarget" ondrop="Eledrop(event)" ondragenter="EledragEnter(event)" ondragleave="EledragLeave(event)" ondragover="EleallowDrop(event)"> <p ondragstart="EledragStart(event)" draggable="true" id="dragtarget"> Dragable element </p> </div> <div class="droptarget" ondragenter="EledragEnter(event)" ondragleave="EledragLeave(event)" ondrop="Eledrop(event)" ondragover="EleallowDrop(event)"> </div> <p id="demo"></p> <script> function EledragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function EledragEnter(event) { if (event.target.className == "droptarget") { document.getElementById( "demo").innerHTML = "Entered the dropzone"; event.target.style.border = "6px dotted red"; } } function EledragLeave(event) { if (event.target.className == "droptarget") { document.getElementById( "demo").innerHTML = "Left the dropzone"; event.target.style.border = ""; } } function EleallowDrop(event) { event.preventDefault(); } function Eledrop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } </script> </center></body></html> |
Output:
Example 2: Using JavaScript
html
<!DOCTYPE HTML><html><head> <title> HTML DOM ondragleave Event </title> <style> .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </style></head><body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM ondragleave Event</h2> <div class="droptarget"> <p draggable="true" id="dragtarget"> Draggable Element </p> </div> <div class="droptarget"></div> <p id="demo"></p> <script> // Event fired on the drag target document.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); }; // Events fired on the drop target document.ondragenter = function(event) { if (event.target.className == "droptarget") { document.getElementById( "demo").innerHTML = "Entered the dropzone"; event.target.style.backgroundColor = "yellow"; } }; document.ondragover = function(event) { event.preventDefault(); }; document.ondragleave = function(event) { if (event.target.className == "droptarget") { document.getElementById( "demo").innerHTML = "Left the dropzone"; event.target.style.backgroundColor = ""; } }; document.ondrop = function(event) { event.preventDefault(); if (event.target.className == "droptarget") { event.target.style.backgroundColor = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }; </script> </center></body></html> |
Output:
Example 3: Using the addEventListener() method:
html
<!DOCTYPE HTML><html><head> <title>HTML DOM ondragleave Event</title> <style> .droptarget { float: center; width: 300px; height: 50px; margin: 20px; padding: 5px; border: 6px solid green; } </style></head><body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM ondragleave Event</h2> <div class="droptarget"> <p draggable="true" id="dragtarget"> Draggable Element </p> </div> <div class="droptarget"></div> <p id="demo"></p> <script> document.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text", event.target.id); }); document.addEventListener("dragenter", function(event) { if (event.target.className == "droptarget") { document.getElementById("demo").innerHTML = "Entered the dropzone"; event.target.style.backgroundColor = "yellow"; } }); document.addEventListener("dragover", function(event) { event.preventDefault(); }); document.addEventListener("dragleave", function(event) { if (event.target.className == "droptarget") { document.getElementById( "demo").innerHTML = "Left the dropzone"; event.target.style.backgroundColor = ""; } }); document.addEventListener("drop", function(event) { event.preventDefault(); if (event.target.className == "droptarget") { event.target.style.backgroundColor = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script> </center></body></html> |
Output:
Supported Browsers: The browsers supported by DOM ondragleave Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Please Login to comment...