How to prohibit the movement of more than one item in the connected containers.

    1 answer 1

    How to prohibit the movement of more than one item in the connected containers.

    To do this, you need to check the number of elements in the container in which you move the element.

    $(function() { $('#main_list, ul').sortable({ connectWith: '.connect_lists', receive: function(event, ui) { var $this = $(this); if ($this.attr('id') != "main_list" && $this.children('li').length > 1) { $(ui.sender).sortable('cancel'); } } }); }); 
     li { height: 25px; background: #E8CC34; width: 80px; margin-top: 5px; } ul { list-style: none; background: #bbb; float: left; margin-right: 20px; height: 150px; width: 100px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <ul id="main_list" class="connect_lists"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <div> <ul id="first" class="connect_lists"></ul> <ul id="second" class="connect_lists"></ul> <ul id="third" class="connect_lists"></ul> </div>