Question

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

这里是没有收容选项的可排序列表 - 请注意您必须＆＃34;摇动＆＃34;有时让它们掉落的盒子： 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()); }
};

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

这是一个使用相同包含选项的jQuery版本： http://jsfiddle.net/L7jemdbh/

Answer 1

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

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

Updated Fiddle

Answer 2

这是我可以创建的最简单的例子： http://jsfiddle.net/0sx1wnyr/1/

有一个问题的解决方法，必须摇动块以放弃它 - 你需要添加一个'start'事件处理程序： https://github.com/angular-ui/ui-sortable/issues/19

$scope.sortableOptions = { 
    containment: "parent", 
    axis: "x", 
    tolerance: "pointer",
    start: function(e, ui) {
        $(e.target).data("ui-sortable").floating = true;
    }
};

Angular Sortable Containment可防止跌落操作

2 个答案: