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;
    height:200px;
    width:200px;
    border-radius: 50%;
}
.draggable {
    background:black;
    height: 25px;
    width: 25px;
}
.touched {
    background:red;
}

JavaScript

$('.draggable').draggable();
$('.droppable').droppable({
    tolerance: 'touch',
    over: function () {
        $(this).addClass('touched');
    }
});