HTML | ondragleave Event Attribute

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.

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right






                        filter_none








Output:




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


    

  • Google Chrome 4.0
    • 

  • Internet Explorer 9.0
    • 

  • Mozila Firefox 3.5
    • 

  • Safari 6.0
    • 

  • Opera 12.0
    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Sabya_Samadder
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.