JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<div id="draggablesInsideMe">
    <span class="draggableThing">Drag me!</span>
</div>
<hr />
<div id="targetsInsideMe">
    <span class="target">Drop on me 1!</span>
    <span class="target">Drop on me 2!</span>
    <span class="target">Drop on me 3!</span>
    <span class="target">Drop on me 4!</span>
    <span class="target">Drop on me 5!</span>
    <span class="target">Drop on me 6!</span>
    <span class="target">Drop on me 7!</span>
    <span class="target">Drop on me 8!</span>
    <span class="target">Drop on me 9!</span>
    <span class="target">Drop on me 10!</span>
    <span class="target">Drop on me 11!</span>
    <span class="target">Drop on me 12!</span>
</div>
Not here!

CSS

div#draggablesInsideMe {
    width: 170px;
    border: 1px black solid;
}
div#targetsInsideMe {
    display: block;
    width: 180px;
    height: 125px;
    border: 1px black solid;
    overflow: auto;
}
span.draggableThing, span.target{
    display: block;
    border: 1px black solid;
    background: gray;
    width: 160px;
    height: 50px;
}

JavaScript

// [email protected]
// MIT Licensed

$(".draggableThing").draggable({
    snap: ".target:visible",
    snapMode: "inner"
});