JSFiddle - React, Tailwind, and code Playground

HTML

Div1 is not colliding but still its showing <br/>Colliding? true <br/>
Once you drag away it will set <br/> Colliding? false...
<br/>
It should show false untill Div1 not collide...

<div id="div1">
    Div1
</div><br/>
<div id="div2">
    Div2
</div>

<p>Colliding? <span id="result">false</span>
<script>

/* globals define jQuery */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory)
    } else {
        // Browser globals
        factory(jQuery)
    }
}(function ($) {
    $.widget('ui.rotatable', $.ui.mouse, {
        widgetEventPrefix: 'rotate',

        options: {
            angle: false,       // specify an angle in radians (for backward compatability)
            degrees: false,     // specify angle in degrees
            handle: false,      // an image to use for a handle
            handleOffset: {     // where the handle should appear
                top: 0,
                left: 0
            },
            radians: false,     // specify angle in radians
            rotate: null,       // a callback for during rotation
            rotationCenterOffset: {   // offset the center of the element for rotation
                top: 0,
                left: 0
            },
            snap: false,        // boolean flag, should the element snap to a certain rotation?
            start: null,        // callback when rotation starts
            step: 22.5,         // angle in degrees that the rotation should be snapped to
            stop: null,         // callback when rotation stops
            transforms: null,   // other transforms to performed on the element
            wheelRotate: true   // boolean flag, should the element rotate when the mousewheel is rotated?
        },

        // accessor for the angle in radians
        angle: function (angle) {
            if (angle === undefined) {
                return this.options.angle
            }
   ...

CSS

#div1 { width: 200px; height: 50px; background-color: pink;
margin-top:100px; margin-left:150px; -webkit-transform: rotate(105deg);
}
#div2 { margin-top:-100px;width: 200px; height: 100px; background-color: green; }

JavaScript

function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
        
      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
    }


window.setInterval(function() {
    $('#result').text(collision($('#div1'), $('#div2')));
}, 200);


$('#div1,#div2').draggable();