Open In App

HTML ondragleave Event Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: 

az

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:

swq

Output

Supported Browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 9 and above
  • Opera 12 and above
  • Safari 3.1 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads