JSFiddle - React, Tailwind, and code Playground

HTML

<div id='drag-item'>
    <div class='img'></div>
</div>
<div id='img1' class='img'></div>
<div id='img2' class='img'></div>
<div id='img3' class='img'></div>
<div id='img4' class='img'></div>
<div id='img5' class='img'></div>

CSS

.img {
    height: 50px;
    width: 50px;
    border: 1px solid;
}

JavaScript

$('#drag-item').draggable({
    drag: function (event, ui) {
        var height = ui.helper.height();
        var divs = $('div.img').not($(this).children());

        var pos = ui.position;
        
        divs.each(function (index, value) {
            var t = $(this).position();
            var hei = $(this).height()

            if (t.top <= pos.top + height ) { // check for top collision
                if (pos.left <= t.left + $(this).width()) { // check for side collision
                    console.log('hit the object');
                }
            }
        });
    }
});