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:

<!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
Mozila Firefox 3.5
Safari 6.0
Opera 12.0

My Personal Notes

Recommended Posts: