Ignore drag leaves

by stevendwood

HTML

<div class="dragMe" id="dragMe" draggable="true">Drag me</div>
<div id="outerDragTarget">
    <div id="innerDragTarget" class="inner">
    </div>
</div>

CSS

#dragMe, #outerDragTarget {
    height: 200px;
    width: 200px;
    border: 2px solid green;
}

#outerDragTarget {
    position: relative;
}

#innerDragTarget {
    position: absolute;
    height: 40px;
    width: 40px;
    top: 30px;
    left: 10px;
    background-color: red;
   
}

.dragover {
    border: 10px solid pink !important;
}

JavaScript

var ignoreNextLeave = false;

$("#outerDragTarget").on("dragenter", function(ev) {
    // not interested in dragleaves from my children...
    if (ev.target !== this) {
        ignoreNextLeave = true;
    }
    
    $(this).addClass("dragover");
    
}).on("dragleave", function(ev) {
     
    if (ignoreNextLeave) {
        ignoreNextLeave = false;
        return;
    }
    
    $(this).removeClass("dragover");
    
})

$(document.body).on("dragend",  function(ev) {
    $("#outerDragTarget").removeClass("dragover");
});

$("#innerDragTarget").on("dragleave", function(ev) {
   ev.stopPropagation();
});