Open In App

HTML DOM ondragleave Event

Improve
Improve
Like Article
Like
Save
Share
Report

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();
                let 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 = "";
                    let 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 = "";
                   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


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