Drag over weird behavior

HTML

<div id="drop">
  <div>drop here</div>
</div>
<div style="width:20px;height:20px;background:red;" draggable="true">test
</div>

CSS

#drop {
    width: 200px;
    height: 100px;
    border: 4px dashed #ccc;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 20px;
}

#drop.dragOver {
    border-color: black;
}

#drop div {
    margin: 20px auto;
    width: 150px;
    padding: 10px 0px;
    background-color: #ccc;
}

JavaScript

$("#drop").on( "dragenter", function() {
    console.log( "D >> dragenter!" );
    $("#drop").addClass( "dragOver" );            
});
                      
$("#drop").on( "dragleave", function() {
    console.log( "D << dragleave!" );
    $("#drop").removeClass( "dragOver" );
});
                      
$("#drop").on( "mouseenter", function() {
    console.log( "M >> mouseenter!" );
});
                      
$("#drop").on( "mouseleave", function() {
    console.log( "M << mouseleave!" );
});