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
<!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();
let data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 2: Using JavaScript
<!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 = "";
let data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
}
};
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 3: Using the addEventListener() method:
<!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 = "";
let 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