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.

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 content */
        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>