CODEWITHSUNDEEP
jqueryhtmljquery-ui
Naman Gala
Naman Gala

Reputation: 4692

Move li tag between sortable programmatically

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 sortable. Can any one please help me to move all li from sortable1 to sortable2 using script. Means I want to create MoveAll button which can move all the li from sortable1 to sortable2

Upvotes: 4

Views: 2488

Answers (2)

dfsq
dfsq

Reputation: 193261

Simply append li items to other list:

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

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

Upvotes: 4

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15138

It's quite 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>

Upvotes: 2

Related Questions