将Jquery Sortable的所有项目拖到一起

Question

我正在使用 jQuery sortable 在三个列表之间拖放项目，如下所示。 在某些情况下，我需要将所有项目从一个列表移动到另一个列表。我通过 stackoverflow 中的几个链接但无法使其工作。 所以寻求帮助。

    $( "#sortable1, #sortable2, #sortable3" ).sortable({
        connectWith: ".connectedSortable"            
    }).disableSelection();

<ul id="sortable1" class="connectedSortable">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul id="sortable2" class="connectedSortable">
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>
<ul id="sortable3" class="connectedSortable">
    <li>Seven</li>
    <li>eight</li>
    <li>Nine</li>
</ul>

Answer 1

您的电话有两个问题。首先，您声明一个用于将列表绑定在一起的类，但从不使用该类将它们实际绑定在一起。相反，您的 html 应如下所示，并添加了 class="connectedSortable"：

<ul id="sortable1" class="connectedSortable">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul id="sortable2" class="connectedSortable">
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>
<ul id="sortable3" class="connectedSortable">
    <li>Seven</li>
    <li>eight</li>
    <li>Nine</li>
</ul>

其次，您还有一个选项可以防止拖动任何列表的最后一项，因此如果您想从列表中删除所有项目，则需要删除取消选项，如下所示：

jQuery( "#sortable1, #sortable2, #sortable3" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();

小提琴：http://jsfiddle.net/duffmaster33/R4U9F/