JSFiddle - React, Tailwind, and code Playground

HTML

<div id="obj1">a</div>

<div id="obj2">b</div>
<br><br>
drag circles to test collision!
<div id="testcollision">no boom</div>

CSS

#obj1{
    background-color: red;
    border-radius: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    position: aboslute;
    left: 100px;
    top: 0px;
    cursor: move;
}

#obj2{
    background-color: blue;
    border-radius: 100px;
    width: 200px;
    height: 200px;
    text-align: center;
    
    position: aboslute;
    left: 50px;
    top:10px;
    cursor: move;
}

#testcollision{
    border: 1px solid black;
    padding: 10px;

}

JavaScript

function getDistance(obj1,obj2){
    Obj1Center=[obj1.offset().left+obj1.width()/2,obj1.offset().top+obj1.height()/2];
    Obj2Center=[obj2.offset().left+obj2.width()/2,obj2.offset().top+obj2.height()/2];

    var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

function hasCollision(obj1,obj2){    
    return getDistance(obj1,obj2)<obj1.width()/2+obj2.width()/2;
}

$(document).ready(function(){
    $( "#obj1, #obj2" ).draggable({drag: function(){
        
        if (hasCollision($("#obj1"), $("#obj2")) ){
             
            $("#testcollision").html("boom!");
        
        }
        else{
            
            $("#testcollision").html("no boom");
            
        }    

          }
      } );    
    
});