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>
<svg width="0" height="0">
    <clipPath id="clipping">
        <circle cx="100" cy="100" r="100" />
    </clipPath>
</svg>

CSS

.droppable {
    position:relative;
    background:green;
    width:200px;
    height:200px;
    clip-path: url(#clipping);
}
.draggable {
    background:black;
    height: 25px;
    width: 25px;
}
.touched {
    background:red;
}

JavaScript

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