HTML | ondragleave Event Attribute

Difficulty Level : Easy
Last Updated : 02 Aug, 2021

The ondragleave attribute works when a draggable element or text selection leaves a valid drop target. It helps in dragging the elements and is entering or leaving a drop target. Drag and drop feature is very popular in HTML 5. Use CSS property when the element is draggable and enter into the drop target.
Supported Tags: It supports all HTML rags.

Syntax:

<element ondragleave = "script">

Attribute Value: The ondragleave event attribute contains single value script which works when ondragleave event called.
Note: Images and links are by default draggable.
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;
            }
        </style>
        <script>
         
            /* Function to start drag contenr */
            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:

Supported Browsers: The browser supported by ondragleave event attributes are listed below:

Google Chrome 4.0
Internet Explorer 9.0
Mozilla Firefox 3.5
Safari 6.0
Opera 12.0

My Personal Notes

Related Articles

Table of Contents

HTML | ondragleave Event Attribute

html

Start Your Coding Journey Now!