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.


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






        <title>ondragleave event attribute</title>
            .droptarget { 
                width: 250px; 
                height: 100px;
                margin: 15px;
                padding: 5px;
                border: 2px solid black;
            /* Function to start drag contenr */
            function dragStart(event) {
            /* Function to dragenter event */
            function dragEnter(event) {
                if ( == "droptarget" ) {
           = "2px solid green";
                    document.getElementById("demo").innerHTML = 
            /* Function to dragleave event */
            function dragLeave(event) {
                if ( == "droptarget" ) {
           = "";
                    document.getElementById("demo").innerHTML = 
                            "Out of Dropzone";
            /* Function to allow drop content */
            function allowDrop(event) {
            /* Function to drop content */
            function drop(event) {
                var data = event.dataTransfer.getData("Text");
            Drag the element between the boxes
        <!-- 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">
        <div class = "droptarget" 
            ondragenter = "dragEnter(event)" 
            ondragleave = "dragLeave(event)" 
            ondrop = "drop(event)" 
            ondragover = "allowDrop(event)">
        <!-- Drag and drop events ends -->
        <p style="clear:both;"></p>
        <p id="demo"></p>



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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to 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.