JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='figure' id='fig_1'></div>
    <div class='figure' id='fig_2'></div>
    <div class='figure' id='fig_3'></div>
    <div class='figure' id='fig_4'></div>
    
    <div class='box'></div>
</div>

CSS

.container {
    position: absolute;
    width: 500px;
    height: 600px;
    border: 1px solid red;
    left: 0;
    top: 0;
}

.box {
    position: absolute;
    outline: 1px solid green;
    display: none;
    z-index: 1;
}

.figure {
    position: absolute;
    background: #aaa;
    z-index: 5;
}

#fig_1 {
    width: 150px;
    height: 75px;
    left: 10px;
    top: 10px;
}

#fig_2 {
    width: 120px;
    height: 85px;
    left: 100px;
    top: 167px;
}

#fig_3 {
    width: 180px;
    height: 30px;
    left: 300px;
    top: 17px;
}

#fig_4 {
    width: 180px;
    height: 150px;
    left: 140px;
    top: 390px;
}

JavaScript

var Element = function($obj, pull) {
    this.$obj = $obj;
    this.$$pull = pull;
}
Element.prototype.$obj = null;
Element.prototype.$$pull = [];
Element.prototype.isCatch = false;
Element.prototype.x = 0;
Element.prototype.y = 0;
Element.prototype.x0 = 0;
Element.prototype.y0 = 0;
Element.prototype.dx = 0;
Element.prototype.dy = 0;

Element.prototype.minX = 0;
Element.prototype.maxX = 0;
Element.prototype.minY = 0;
Element.prototype.maxY = 0;

Element.prototype.isLinesIntersect = function(a0, b0, a1, b1) {
    if (a0 >= a1 && a0 <= b1) {
        return true;
    }
    
    if (b0 >= a1 && b0 <= b1 ) {
        return true;
    }
    
    if (a1 >= a0 && a1 <= b0) {
        return true;
    }
    
    return false;
}

Element.prototype.calcBox = function()
{
    var x0 = this.$obj.offset().left;
    var y0 = this.$obj.offset().top;
    
    var x1 = x0 + this.$obj.width();
    var y1 = y0 + this.$obj.height();
    
    var $intr;
    var ix0, iy0, ix1, iy1;
    var minX = 0; 
    var minY = 0; 
    var maxX = 500; // magic, must be container width
    var maxY = 600; // magic, must be container height
    var self = this;
    this.$$pull.each(function() {
        $intr = $(this);
        if ($intr.data('_class').isCatch) return; // this i am
        
        ix0 = $intr.offset().left;
        iy0 = $intr.offset().top;
        
        ix1 = ix0 + $intr.width();
        iy1 = iy0 + $intr.height();
        
        // left side:
        if (ix1 <= x0 && self.isLinesIntersect(iy0, iy1, y0, y1)) {
            if (ix1 > minX) minX = ix1;
        }
         
        // right side:
        if (ix0 >= x1 && self.isLinesIntersect(iy0, iy1, y0, y1)) {
            if (ix0 < maxX) maxX = ix0 - 1;
        }
        
        // top:
        if (iy1 <= y0 && self.isLinesIntersect(ix0, ix1, x0, x1)) {
            if (iy1 > minY) minY = iy1;
        }
        
        // bottom:
        if (iy0 >= y1 && self.isLinesIntersect(ix0, ix1, x0, x1)) {
            if (iy0 < maxY) maxY =...