JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<div class='drag' style='background-color: red;'></div>
<div class='drag' style='background-color: blue;'></div>

CSS

.drag {

    position: absolute;
    width: 45px;
    height: 45px;
    
}

JavaScript

$('.drag').draggable({
    stop: function(event, ui) {
        var others = $('.drag').not(this),
            _self = this,
            length = $(_self).width();
        others.each(function(i, item) {
            var this_left = parseInt(item.style.left) - length,
                this_top = parseInt(item.style.top) - length;
            if (ui.position.left > this_left && ui.position.top > this_top) {
                var left = Math.abs(ui.position.left - this_left),
                    top = Math.abs(ui.position.top - this_top);
                if (left <= (length*2) && top <= (length*2)) {
                    alert('overlap');
                }
            }
        });
    }
})