Move li tag between sortable software

Question

I have below html code

<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>

And script

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

I am new to sorting. Can someone help me move everything from sortable1 to sortable2 using a script. I want to create a MoveAll button that can move everything from sortable1 to sortable2

Thank.

Answer 1

Just add li elements to another list:

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

Demo: http://jsfiddle.net/3z0e6q9m/

Answer 2

It is pretty simple:

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

<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>

Run codeHide result