Skip to content
Related Articles

Related Articles

HTML | DOM ondragleave Event
  • Last Updated : 28 Jun, 2019

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:

    Events fired on the draggable target:

  • ondragstart: occurs when dragging of an element started.
  • ondrag: occurs while an element is dragging.
  • ondragend: occurs when dragging of an element finished.
    Events fired on the drop target:

  • 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.

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();
                var 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 = "";
                    var 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 = "";
                    var 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
My Personal Notes arrow_drop_up
Recommended Articles
Page :