CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Jeffrey
Jeffrey

Reputation: 2005

jQuery sortable groups and subgroups

I've got a div in which I want all the h2, p and div elements to be sortable. I also want to have sub-sortable groups in there and I want the elements from the main and the elements from the sub groups to be sortable with each other. So an element from the main group should be allowed to put into a sub group and back.

I've set up a jsFiddle in hope that I can display what I want. The idea is that the light grey elements should be able to be put into the group with the dark grays and the other way around.

http://jsfiddle.net/LpmfY/1/

JS

$(document).ready(function () {
    $('.sort_these').sortable();
});

HTML

<div class='sort_these'>
     <h2>...</h2>

    <p>...</p>
    <p>...</p>
    <div class='sort_these'>
         <h2>...</h2>

        <p>...</p>
    </div>
    <div>...</div>
</div>

Can anyone help me in the right direction?

Upvotes: 1

Views: 9619

Answers (2)

jalba
jalba

Reputation: 64

You should check connectWith: http://jqueryui.com/sortable/#connect-lists

Upvotes: 2

apaul
apaul

Reputation: 16170

You should probably start with the connectWith option, something like this:

Working Example

$(document).ready(function () {
    $('.sort_these').sortable({
        connectWith: '.sort_these'
    });
});

Upvotes: 4

Related Questions