Last Updated : 11 Jul, 2025
The ondragleave attribute works when a draggable element or text selection leaves a valid drop target. It helps in dragging the elements and get to know the entering or leaving a drop target. Drag and drop feature is very popular in HTML5. Use CSS property when the element is draggable and enter into the drop target.
It is fired when an object being dragged leaves a drop target. When an element being dragged is moved out of a drop zone, developers can specify actions to be triggered.
Syntax:<element ondragleave = "script">Supported Tags:
It supports all HTML tags.
Attribute Value:The ondragleave event attribute contains a single value script which works when the ondragleave event is called.
Note: Images and links are by default draggable.
Example 1:In this example, we will see the implementation of the ondragleave tag.
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:
Output Example 2:In this example, we will see the implementation of the ondragleave tag with another 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;
}
button {
margin-top: 15px;
}
</style>
<script>
function dragStart(event) {
event.dataTransfer.setData(
"Text", event.target.id);
}
function dragEnter(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "2px solid green";
document.getElementById("demo").innerHTML =
"Dropzone";
}
}
function dragLeave(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
document.getElementById("demo").innerHTML =
"Out of Dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
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 into the box</h1>
<div class="droptarget" ondrop="drop(event)"
ondragenter="dragEnter(event)"
ondragleave="dragLeave(event)"
ondragover="allowDrop(event)">
<button ondragstart="dragStart(event)"
draggable="true" id="dragtarget">
Click me
</button>
</div>
<p style="clear:both;"></p>
<p id="demo"></p>
</center>
</body>
</html>
Output:
Output Supported Browsers:RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4