JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.drag { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div class="drag" id='red' style='background-color: red;'>&nbsp;</div>
<div class="drag" id='green' style='background-color: green;'>&nbsp;</div>
<div class="drag" id='purple' style='background-color: purple;'>&nbsp;</div>
<div class="drag" id='brown' style='background-color: brown;'>&nbsp;</div>
<div class="drag" id='blue' style='background-color: blue;'>&nbsp;</div>
</body>
</html>

JavaScript

(function($) {

jQuery.extend(jQuery.expr[':'], {
    overlaps: function(elem, i, m, array) {
                alert("Elements passed as 'elem' argument:" + $(elem).length); // elem.length = 1, this refers to the argument to 'overlaps'
                alert("Length of 'array' argument:" + array.length); // array refers to $('.drag') - or should do. In FF, Webkit and IE9 array.length = 5; in IE7,8 this = 14
                //for(var i in array) { alert(array[i]);} // dumps out length of array - seems that array is picking up EVERY ELEMENT ON THE PAGE in IE7,8
                                                          // starting at HTMLCommentElement (for the DocType) and ending with the 5th HTMLDivElement  
                return false; //return isOverlapping([elem], array);
    }
});


})(jQuery);

$(document).ready(function() {
    $('.drag').draggable();
    
    $(document).bind('dragstop', $('.drag'), function(e) {   // was 'on' in 1.7.2
        var ol = $('.drag:overlaps(#'+$(e.target).attr('id')+')'); 
        //.filter(':not(#'+$(e.target).attr('id')+')');
        //    alert(ol.length);
        });
                
});