jquery ui sortabble in groups

Question

How can I make a jquery sortable available in groups ? (that is means that you can also sort it, interchange in other groups as well)

<div class="wpr">
<ul class="items1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul class="items2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

js :

$(document).ready(function(){
    Init();
});

function Init(){
    $( ".items1" ).sortable();
}

Demo

I just want to add, that I also have a draggable and droppable in this project. , which means that the droppable is also a sortable in those groups..

Ganesh Gaxy · Accepted Answer · 2014-08-21 07:53:10Z

2

Use this....

$( ".items1" ).sortable({
        connectWith: '.items2'
    });

Or Use this..

<ul id="items1" class="items">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul id="items2" class="items">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

And the Script::

function Init(){
    $( "#items1" ).sortable({
        connectWith: '.items'
    });
    $( "#items2" ).sortable({
        connectWith: '.items'
    });
}

or

function Init(){
    $( ".items" ).sortable({
        connectWith: '.items'
    });
}

By this you can achieve..

edited Aug 21, 2014 at 7:53

answered Aug 21, 2014 at 7:34

Ganesh Gaxy

6535 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeGEC Over a year ago

A slight improvement : $(".items").sortable({ connectWith: ".items" }); fiddle

Ganesh Gaxy Over a year ago

yup we can do that too

Collectives™ on Stack Overflow

jquery ui sortabble in groups

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related