JSFiddle - React, Tailwind, and code Playground

by Tiago Antonio Jacobi

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

$("#droppable_widget,#draggable_widget").sortable({
  connectWith: "#droppable_widget,#draggable_widget",
  start: function (event, ui) {
  }
});

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