JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ha2" class="box">2</div>
<div id="ha3" class="box">3</div>
<div id="ha4" class="box">4</div>
<div id="ha">1</div>

CSS

#ha {
    background-color: green;
    width:100px;
    height:100px;
    color:black;
}
.under {
    box-shadow: 0px 0px 4px 1px black inset;
}
#ha2 {
    background-color: lightblue;
    width:100px;
    height:100px;
    position:absolute;
    left:200px;
}
#ha3 {
    background-color: lightblue;
    width:100px;
    height:100px;
    position:absolute;
    left:300px;
    top:200px;
}
#ha4 {
    background-color: lightblue;
    width:100px;
    height:100px;
    position:absolute;
    left:30px;
    top:190px;
}

JavaScript

$("#ha").draggable({
    drag: function () {
        
        $(".box").each(function() {
            $(this).removeClass("under");
            if (event.pageX > $(this).position().left && event.pageX < ($(this).position().left + $(this).width()) && event.pageY > $(this).position().top && event.pageY < ($(this).position().top + $(this).height())) {
                $(this).addClass("under");
            }
        });
    }
});