JSFiddle - React, Tailwind, and code Playground

HTML

<div class='dropping-box'>Drop here: <span id='info'></span></div>
<div class='wrapper'> 
    <div class='blocks'> 
        <div class='block droppable' id='block_1'>Droppable</div> 
        <div class='block' id='block_2'>Not Droppable</div> 
    </div>
</div>

CSS

.wrapper {
    margin: 40px auto;
    width: 600px;
    border: 0px solid black;
}
.blocks {
    float:left;
    width: 100%;
    margin: 0 0 5px 0;
}
.block {
    float:left;
    cursor: move;
    padding: 10px;
    border: 1px solid black;
    margin: 0 20px 0 0;
}
#block_1 {
    background-color: #f16522;
}
#block_2 {
    background-color: #fff467;
}
.dropping-box {
    height: 50px;
    padding: 10px;
    border: 1px solid black;
    background-color: #6ccff7;
    margin: 0 20px 0 0;
}

JavaScript

/*
This example ilustrates a bug in jquery ui:
If you drop the orange box into the droppable area you will read the events:
1) overing
2) dropping
If you move the orage box inside the gropping area you will see those two events.
Now the bug.
1) Refresh page
2) drop the orange box (droppable) inside the dropping area
3) drop the yellow (Not droppable) box into the dropping area
4) move the orange box in the dropping area

Problem: The over event is NOT being fired

*/
$(document).ready(function() {
    $('.block').draggable();
    $('.dropping-box').droppable({
        accept: '.droppable',
        over: function(event, ui) {
            $('#info').text('overing');
        },
        out:function(event, ui) {
            $('#info').text('outing');
        },
        drop:function(event, ui) {
            $('#info').text('dropping');
        }                       
    });
});