jQuery sortable – 在2个连接列表之间移动项目保持计数

我有两个列表，包含6个项目，connectedwith一个类.connectedSortable当我在两个列表之间移动一个项目时，它会被附加到目标列表，并从源列表中删除。 所以现在我们有一个包含5个项目的列表，以及一个包含7个项目的列表。 每个列表中的项目如何保留6个项目，我们只是将目标列表中最顶层的项目移动到第一个列表（自动按照与列表相同的顺序重新排列）？

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
 
 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
 
 $( ".connectedSortable" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); 

澄清：列表的数量可以是2或更多。 但我所追求的是每个列表固定数量为6个项目，如果它是单个列表，则可以自动重新排序。 例如，如果在项目4之后将项目3从list1移动到list2，那么结果应为：

 
 
Item 1
 
Item 2
 
Item 4
 
Item 5
 
Item 6
 
Item 1
 
 
 
Item 2
 
Item 3
 
Item 4
 
Item 3
 
Item 5
 
Item 6
  

的jsfiddle

Answer 1

您可以使用receive选项执行此操作。 以下代码假定有许多

元素， id="ulX" ，其中X是从1开始的整数序列：

 $(function() { $( ".connectedSortable" ).sortable({ connectWith: ".connectedSortable", receive: function (event, ui) { var targetul = $(ui.item).parent().attr("id"); var targetno = parseInt(targetul.split("ul")[1]); var sourceul = $(ui.sender).attr("id"); var sourceno = parseInt(sourceul.split("ul")[1]); if (sourceno > targetno) rippleUp(targetno, sourceno); else rippleDown(targetno, sourceno); } }).disableSelection(); }); function rippleUp(start, end) { for (var i=start;i li").last().prependTo("#ul"+(i+1)); } } function rippleDown(start, end) { for (var i=start;i>end;i--) { $("#ul"+i+" > li").first().appendTo("#ul"+(i-1)); } }