JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable">drag</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;
}
#draggable, #droppable {
    width: 100px;
    height: 100px;
    border: 1px solid #000; 
}
#draggable {
    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').draggable();


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

$('#droppable').droppable({
    greedy: true,
    tolerance: 'pointer',
}).bind('drop',function(e,ui) {
    console.log('Dropped on inner');
    
    if((Math.random() * 5) > 3) {
        return false;
    }
});