Question

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

有关我的问题的更多定义，请参阅下面的JS Fiddle Code Example和文字。

这是我的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',
    });
});

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

我该怎么做？

由于

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（）函数可以防止在父级之外移动。

Jquery Sortable - 将项目锁定到父项

1 个答案: