JSFiddle - React, Tailwind, and code Playground

HTML

<div class="droppable"></div>
<div class="droppable" style="left:200px"></div>
<div class="draggable"></div>

<h2>Drag the black div between the two green divs</h2>

CSS

.droppable {
    position:relative;
    background:green;
    width:200px;
    height:200px;
    border-radius: 50%;
}
.draggable {
    background:black;
    height: 25px;
    width: 25px;
}
.touched {
    background:red;
}

JavaScript

$('.draggable').draggable({
    drag: function (aEvent, aUi) {
        
        $(".droppable").each(function() {
               
            var myX = aUi.offset.left;
            var myY = aUi.offset.top;
            
            var myR = $(this).outerWidth() / 2;
            var myCX = $(this).offset().left + myR;
            var myCY = $(this).offset().top + myR;
            
            console.log({x: myX, y: myY, r: myR, cx: myCX, cy: myCY});
            
            if (checkIntersection(myX, myY, myCX, myCY, myR))
            {
                $(this).addClass('touched');
            }
        });
    }    
});
$('.droppable').droppable({
    tolerance: 'touch'
});

function checkIntersection(aX, aY, aCX, aCY, aR) {
    return (Math.pow(aX - aCX, 2) + Math.pow(aY - aCY, 2) < Math.pow(aR, 2));
}