以编程方式在可排序之间移动li标签

Question

我有以下HTML代码

<ul id="sortable1" 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>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>

和脚本

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

我是新手，可以排序。任何人都可以帮我把所有li从sortable1移动到sortable2使用脚本。意味着我想创建MoveAll按钮，它可以将所有li从sortable1移动到sortable2

感谢。

Answer 1

只需将li项目附加到其他列表：

$('#sortable1 li').appendTo('#sortable2');

演示：http://jsfiddle.net/3z0e6q9m/

Answer 2

这很简单：

＆＃13;

＆＃13;

$(function() { 
    $("#moveAll").on("click", function(e) { 
        $("#sortable2").append($("#sortable1 li"));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Sortable1</h1>
<ul id="sortable1" 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>
</ul>
<h1>Sortable2</h1>
<ul id="sortable2" class="connectedSortable">
</ul>
<button id="moveAll">Move All</button>

＆＃13;

＆＃13;

＆＃13;