JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sortable-left-container">
<div class="sortable-list-container">
<ul id="sortable-left" class='sortable-movievideos'>
<li class="ui-state-default" style="background:red">Item 1</li>
<li class="ui-state-default" style="background:blue">Item 2</li>
<li class="ui-state-default" style="background:yellow">Item 3</li>
<li class="ui-state-default" style="background:cyan">Item 4</li>
<li class="ui-state-default" style="background:brown">Item 5</li>
<li class="ui-state-default" style="background:orange">Item 6</li>
<li class="ui-state-default" style="background:grey">Item 7</li>
<li class="ui-state-default" style="background:green">Item 8</li>
<li class="ui-state-default" style="background:AliceBlue">Item 9</li>
<li class="ui-state-default" style="background:AntiqueWhite">Item 10</li>
<li class="ui-state-default" style="background:Azure">Item 11</li>
<li class="ui-state-default" style="background:Beige">Item 12</li>
<li class="ui-state-default" style="background:Bisque">Item 13</li>
<li class="ui-state-default" style="background:Black">Item 14</li>
<li class="ui-state-default" style="background:BlanchedAlmond">Item 15</li>
<li class="ui-state-default" style="background:BlueViolet">Item 16</li>
<li class="ui-state-default" style="background:BurlyWood">Item 17</li>
<li class="ui-state-default" style="background:CadetBlue">Item 18</li>
<li class="ui-state-default" style="background:Chocolate">Item 19</li>
<li class="ui-state-default" style="background:Cornsilk">Item 20</li>
</ul>
</div>
</div>
<div class="sortable-right-container">
<div class="sortable-list-container">
<ul id="sortable-right" class='sortable-movievideos'>
<li class="ui-state-default" style="background:DarkOrchid">Item 1</li>
<li class="ui-state-default" style="background:DarkRed">Item 2</li>
<li class="ui-state-default" style="background:DarkSalmon">Item 3</li>
</ul>
</div>
</div>
CSS
div.sortable-left-container, div.sortable-right-container {
height: 335px;
margin-top: 5px;
overflow-y: scroll;
width: 75px;
float:left;
}
div.sortable-left-container li, div.sortable-right-container li {
cursor: pointer;
height: 50px;
list-style-type: none;
margin: 5px;
width: 50px;
float:left;
}
ul {
height: 400px;
}
JavaScript
jQuery(document).ready(function() {
jQuery(".sortable-movievideos").sortable({
connectWith: 'ul',
});
});