JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sortable" id="listA">
  <li id="ul_item_1">item-1</li>
  <li id="ul_item_2">item-2</li>
  <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul class="sortable" id="listB">
  <li id="ul_item_4">item-4</li>
  <li id="ul_item_5">item-5</li>
  <li id="ul_item_6">item-6</li>
</ul>

JavaScript

$('#listA, #listB').sortable({
  helper: "clone",
  placeholder: "selected-option",
  forcePlaceholderSize: true,
  dropOnEmpty: true,
  revert: true,
  connectWith: '.sortable',
  tolerance: "pointer",
  cursor: "move",
});