<!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
>
<
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
>
<
p
style
=
"clear:both;"
></
p
>
<
p
id
=
"demo"
></
p
>
</
center
>
</
body
>
</
html
>