我有两个列表,每个列表都有六个项目,它们使用.connectedSortable
类相连接。当我在这两个列表之间移动一个项目时,该项目将被添加到目标列表,并从源列表中删除。因此,现在我们拥有一个包含5个项目的列表和一个包含7个项目的列表。如何使每个列表保持6个项目,并仅将目标列表中顶部的项目移动到第一个列表中(自动按与其为一个列表时相同的顺序重新排列)?
<ul class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
</ul>
<ul class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
<li class="ui-state-default">Item 6</li>
</ul>
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
澄清一下:列表的数量可能是2个或更多。但我想要的是每个列表固定的6个项目,并且正确地自动重新排列,就像单个列表一样。例如,如果您将列表1中的项目3移动到列表2中的项目4后面,那么结果应该是这样的:
<ul class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 1</li>
</ul>
<ul class="connectedSortable">
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 5</li>
<li class="ui-state-default">Item 6</li>
</ul>