Open In App
Related Articles

HTML | ondragleave Event Attribute

Improve Article
Save Article
Like Article

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. 


<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;
            color: Green;
        /* Function to start drag content */
        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)"
            <h1 ondragstart="dragStart(event)"
                draggable="true" id="dragtarget">
        <div class="droptarget" ondragenter="dragEnter(event)"
            ondragleave="dragLeave(event)" ondrop="drop(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 1.0
  • Edge 12.0
  • Internet Explorer 9.0
  • Mozilla Firefox 9.0
  • Safari 3.1
  • Opera 12.0

Last Updated : 09 Sep, 2022
Like Article
Save Article
Similar Reads
Related Tutorials