JSFiddle - React, Tailwind, and code Playground

by Riccal

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");
        }
    });
});