JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable">I  want inner</div>
<div id="draggable2">I dont want inner</div>
<div id="outer-droppable">
    outer
    <div id="droppable">inner</div>
</div>

CSS

body {
    padding: 30px;  
}
#droppable {
    background-color: #ccf;
    margin: 20px 0 0 20px;
}
#draggable2,#draggable, #droppable {
    width: 100px;
    height: 100px;
    border: 1px solid #000; 
}
#draggable,#draggable2 {
    width: 50px;
    height: 50px;
    background-color: #cff;
}
#outer-droppable {
    width: 200px;
    height: 200px;
    border: 1px solid #f00;
    background-color: #ccc;
    margin-top: 20px;
}

JavaScript

$('#draggable,#draggable2').draggable();


$('#outer-droppable').droppable({
    greedy: false,
    tolerance: 'pointer',
    drop: function(e,ui) {
        console.log('Dropped on outer');
   }
});

$('#droppable').droppable({
    greedy: false,
    tolerance: 'pointer',
    drop: function(e,ui) {
        console.log('Dropped on inner'); // THIS IS NEVER FIRED
        
        if($(ui.draggable).is('#draggable2')) {
            return false;
        }
    }

});