JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="draggable">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<div class="wrapper">
    <ul class="sortable"></ul>
</div>

CSS

.draggable {
    background-color: red;
    border: 1px solid black;
}

.wrapper {
    height: 50px;
    overflow-y: auto;
}

.sortable {
    background-color: blue;
    border: 1px solid black;
    min-height: 1em;
}

.sortable li {
    background-color: white;
}

JavaScript

$('.draggable li').draggable({
    revert: 'invalid',
    helper: 'clone',
    connectToSortable: '.sortable'
});

$('.sortable').sortable({
    forcePlaceholderSize: true
});