jQuery Sortable-将项目锁定到父级

Question

I'm creating a list application and I've been using jQuery UI's Sortable library. I want to prevent items in a sub list from leaving that list.

See JS Fiddle Code Example and text below that for greater definition on my problem.

Here's my JS Code:

$(function() {
    $('.portal').sortable({
        connectWith: '.portal',
        axis: 'y',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('cont') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });
    $('.subcont').sortable({
        connectWith: '.subcont',
        axis: 'y',
    });
    $('.cont .subcont *').sortable({
        contaiment: 'parent',
    });
});

You will see that inside of the third container, there is a table with two items inside. As their content suggests, I want to trap these two items inside of their parent container (named 'table').

How would I do this?

Thanks

Answer 1

Fixed the issue with some fiddling on with the jQuery:

$(function() {
    $('.portal').sortable({
        connectWith: '.portal',
        axis: 'y',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('cont') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });
    $('.cont:not(.locked) .subcont').sortable({
        connectWith: '.subcont',
        axis: 'y',
    });
    $('.cont.locked .subcont').sortable({
        connectWith: '.cont',
        axis: 'y',
    });
});

The final $.sortable() function prevents movement outside of parent.