JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
</ul>

<ul class="list">
    <li>Elephant</li>
    <li>Lion</li>
    <li>Zebra</li>
</ul>

CSS

.list {
    background-color: gray;
    padding: 10px;
    margin: 10px;
    list-style-type: none;
    float: left;
    min-width: 200px;
}

.list li {
    background-color: yellow;
    padding: 5px;
    margin: 10px 0;
    min-height: 50px;
}

JavaScript

$('.list').sortable({
		connectWith: '.list',
		items: '> li',
		dropOnEmpty: true,
		revert: true,
		scroll: true,
		distance: 15,
		cursorAt: {
			top: 5,
			left: 5
		},
}).disableSelection();