JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
</table>

<div class="drop_area">
<ul>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
</ul>
</div>

CSS

.drop_area {
    height: auto;
    max-height: 100px;
    overflow-y: scroll;
    border: 1px solid black;
}

.hover {
    background-color: #CCC;            
}

.active {
    border: 1px solid yellow;
        
}

JavaScript

$('.drag_me').draggable({
    helper: 'clone',
    scroll: 'true'
});

$('.drop_on_me').droppable({
    accept: '.drag_me',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer'
});