JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

Overlap (px^2): <span id="overlap">0</span >

<div class="tester"></div>
<div class="tester"></div>

CSS

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

JavaScript

var divs = $('.tester').resizable().draggable({
    drag: function(){
        var d0 = divs.eq(0).position(),
            d1 = divs.eq(1).position(),
            x11 = d0.left,
            y11 = d0.top,
            x12 = d0.left + divs.eq(0).width(),
            y12 = d0.top + divs.eq(0).height(),
            x21 = d1.left,
            y21 = d1.top,
            x22 = d1.left + divs.eq(1).width(),
            y22 = 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(x12,x22) - Math.max(x11,x21))
            y_overlap = Math.max(0, Math.min(y12,y22) - Math.max(y11,y21));
        
        $('#overlap').text( x_overlap * y_overlap + " = " + x_overlap + " X " + y_overlap );
    }
});