JSFiddle - React, Tailwind, and code Playground

HTML

<p>Dragging a draggable over a droppable - works great.<br>
Reordering sortables - the hover class (pink) is applied, but not needed.</p>

<h1>SORTABLE & DROPPABLE</h1>
<ul class="sortable">
    <li class="droppable">foo</li>
    <li class="droppable">bar</li>
    <li class="droppable">baz</li>
</ul>

<h1>DRAGGABLE</h1>
<ul>
    <li class="draggable">aaa</li>
    <li class="draggable">bbb</li>
    <li class="draggable">ccc</li>
</ul>

CSS

.droppable { border: 1px solid #000000; }

.draggable { border: 1px solid #c0c0c0; }

.placeholder { background-color: yellow; }
.hover { background-color: pink; }

JavaScript

$(".sortable").sortable({
    forcePlaceholderSize: true,
	helper: "clone",
	opacity: .6,
	placeholder: "placeholder",
	items: "li",
	tolerance: "pointer",
});
$(".droppable").droppable({
    hoverClass: "hover"
});
$(".draggable").draggable({
    helper: "clone"
});