JSFiddle - React, Tailwind, and code Playground
HTML
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable">
#0 drop in me1!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red;" id="Div1" class="droppable">
#1 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div2" class="droppable">
#2 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div3" class="droppable">
#3 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div4" class="droppable">
#4 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div5" class="droppable">
#5 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div6" class="droppable">
#6 drop in me2!
</div>
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div7" class="droppable">
#7 drop in me2!
</div>
<div class="draggable" id="drag" style="height:300px; width:50px; border:1px solid black;"><span>Drag</span></div>
CSS
div.marked { background-color:#92CEF8 }
JavaScript
$(document).ready(function() {
$(".draggable").draggable();
$(".droppable").droppable({
drop: function (event, ui) {
var $draggable = $(ui.draggable);
var draggableTop = $draggable.offset().top;
var draggableHeight = $draggable.height();
var draggableBottom = draggableTop + draggableHeight;
$droppables = $(".droppable");
$droppablesCoveredByDraggable = $droppables.filter( function() {
var $droppable = $(this);
var top = $droppable.offset().top;
var height = $droppable.height();
var bottom = top + height;
var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop;
return isCoveredByDraggable;
});
//mark the droppables that are covered
$droppables.removeClass("marked");
$droppablesCoveredByDraggable.addClass("marked");
}
});
});