jQuery Sortable-将项目锁定到父级

Question

我正在创建一个列表应用程序，并且一直在使用jQuery UI的Sortable库。 我想防止子列表中的项目离开该列表。

有关我的问题的更多定义，请参见JS小提琴代码示例及其下方的文本。

这是我的JS代码：

$(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',
    });
});

您将看到在第三个容器的内部，有一个包含两个项目的表。 正如他们的内容所暗示的那样，我想将这两个项目捕获在其父容器（称为“表”）中。

我该怎么做？

谢谢

Answer 1

修正了一些关于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',
    });
});

最后的$ .sortable（）函数可防止移出父级。