JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable_widget">
            <ul id="sortable " class="connectedSortable sortable">
                List A
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
    <ul id="sortable " class="connectedSortable sortable">
                List A
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>

<div id="droppable_widget" style='height:600px;background-color:aqua;'  ></div>

CSS

ul {
  border: 2px solid red;
  width: 100px;
  min-height: 100px;
}

JavaScript

console.log("ok");

$("#droppable_widget,#draggable_widget").sortable({
  connectWith: "#droppable_widget,#draggable_widget",
  start: function (event, ui) {
  },
  stop: function (event, ui) {
    var item = $(ui.item);
    alert($(this).attr("id"));
    var to = item.parent().is("#droppable_widget");
    var siblingsCount = item.siblings().size();
    if (to && siblingsCount > 0) {
      alert("only one item allowed here");
      return false;
    }
  }
});

 $(".sortable").sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();