JSFiddle - React, Tailwind, and code Playground

by hammadrauf

HTML

<b>Drag and move the squares</b><br>
<div id="overlap">
  Overlap X:<br>Overlap Y:<br>Total overlap (px²):
</div>

<div class="tester1"></div>
<div class="tester2"></div>

CSS

.tester1 {border:1px solid black;width:50px;height:50px}
.tester2 {border:1px solid black;width:80px;height:40px}
b { font-weight: bold; }

JavaScript

var divs = $('[class^=tester]').resizable().draggable({
    drag: function(){
    		//window.alert(divs.eq(0).position())
    		var elem1 = divs.eq(0)
        var elem2 = divs.eq(1)
    		var rect1 = elem1.position()
        var d0 = divs.eq(0).position(),
            d1 = divs.eq(1).position(),
            d1x = d0.left,
            d1y = d0.top,
            d1xMax = d0.left + divs.eq(0).width(),
            d1yMax = d0.top + divs.eq(0).height(),
            d2x = d1.left,
            d2y = d1.top,
            d2xMax = d1.left + divs.eq(1).width(),
            d2yMax = d1.top + divs.eq(1).height(),
            
            /*x_overlap = x12<x21 || x11>x22 ? 0 : Math.min(x12,x22) - Math.max(x11,x21),
            y_overlap = y12<y21 || y11>y22 ? 0 : Math.min(y12,y22) - Math.max(y11,y21);*/
        
            x_overlap = Math.max(0, Math.min(d1xMax,d2xMax) - Math.max(d1x,d2x))
            y_overlap = Math.max(0, Math.min(d1yMax,d2yMax) - Math.max(d1y,d2y));
            
            int_x = (x_overlap==0 || y_overlap==0)?0:Math.max(d1x, d2x);
            int_y = (y_overlap==0 || x_overlap==0)?0:Math.max(d1y, d2y);
            
            if((x_overlap * y_overlap)==0) {
            		if(d1x==d2x || d1x==d2xMax) {
                    int_x = d1x;
                    int_y = Math.max(d1y, d2y);
                } else
            		if(d1xMax==d2x || d1xMax==d2xMax) {
                    int_x = d1xMax;
                    int_y = Math.max(d1y, d2y);
                } ;
            		if(d1y==d2y || d1y==d2yMax) {
                    int_y = d1y;
                    int_x = Math.max(d1x, d2x);
                } else
            		if(d1yMax==d2y || d1yMax==d2yMax) {
                    int_y = d1yMax;
                    int_x = Math.max(d1x, d2x);
                };
            }
        
        $('#overlap').html('d1 = ('+d1x+', '+d1y+') ('+d1xMax+', '+d1yMax+')<br/>'+'d2 = ('+d2x+', '+d2y+') ('+d2xMax+', '+d2yMax+')'+'<br/>Overlap X: ' + x_overlap + '<br/>Overlap...