javascript - Angular Sortable Containment防止放置操作

我有一个水平可排序的Angular列表，​​但是containment选项不起作用，实际上阻止了拖动的项目被丢弃。

这是没有包含选项的可排序列表-请注意，您必须“摇动”盒子以使它们有时掉落：
http://jsfiddle.net/zobgawqt/

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};

这是带有包含选项的可排序列表：
http://jsfiddle.net/4b4jzycs/2/

$scope.sortableOptions = {
    containment: 'parent',
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};

请注意，在第二个版本中，这些框是可拖动但不可拖放的。

这是与相同的containment选项一起使用的jQuery版本：
http://jsfiddle.net/L7jemdbh/

最佳答案

看起来containment属性需要所有可排序项目的共同祖先。如果为它提供.sort-container节点的选择器，它将按预期工作：

$scope.sortableOptions = {
    containment: '.sort-container',
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};

Updated Fiddle