CODEWITHSUNDEEP
jqueryjquery-uinestedjquery-ui-sortable
not_a_generic_user
not_a_generic_user

Reputation: 2178

Prevent Jquery sortable items from moving to parent or child nested sortable lists

I have a page that list items where some items can be nested under others. I want to be able to sort items at any level without letting them drop outside of their level (neither above nor below). The structure is as follows:

<div class="sub_items">
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
        </div>
    </div>
</div>

So I want each level of items to be sortable AT that level. By using the following, I can make all of the lists of sub_items sortable, but they can be moved up and down and the nested items are returned when using serialize (where I want only the items at a given level to be returned with no nested values).

Upvotes: 1

Views: 1770

Answers (1)

not_a_generic_user
not_a_generic_user

Reputation: 2178

I never found this answer online, but figured it out based on something else I saw. The ideas is that by using jquery selectors, we can restrict matches to just one level deep (using no special libraries).

Doesn't work:

$('.sub_items').sortable({
    placeholder: "ui-sortable-placeholder",
    update: function(e, ui) {
        console.log($(this).sortable('toArray'));
    }
});

Works:

$('.sub_items').sortable({
    items: ">.item",
    placeholder: "ui-sortable-placeholder",
    update: function(e, ui) {
        console.log($(this).sortable('toArray'));
    }
});

What this is doing is limiting sortable items to only items that are directly descended of the .sub_items being processed at the time, just as doing $('.sub_items>.item') would only select items that are one level deep.

Upvotes: 3

Related Questions