如何将拖放功能限制为角度 ui 树中的同级元素?

Question

我正在开发一个树视图来显示使用AngularJS的类别列表。 我使用了这个 git 存储库。

.HTML

<div ui-tree="treeOptions" id="tree-root" data-drag-enabled="true">
<ol ui-tree-nodes ng-model="nodes">
<li ng-repeat="node in nodes"  
ui-tree-node 
data-type="top-level" 
ng-include="'nodes_renderer.html'"></li>
</ol>
</div>

我能够在树中实现拖放元素。 我想将拖放功能限制为仅同级元素。

我在下面尝试过，但仍然没有运气。

.JS

$scope.treeOptions = {
accept: function (sourceNodeScope, destNodesScope, destIndex) {
if (sourceNodeScope.$parent.$id === destNodesScope.$parent.$id)
return true;
else
return false;
}
}

我在 GitHub 存储库上找不到太多关于此要求的信息。 任何帮助或有用的链接都非常感谢。

Answer 1

你的逻辑基本上没问题，但是你使用的回调不是正确的。Angular-ui-tree 有一个beforeDrop回调，它允许你返回一个承诺，并根据结果接受或拒绝丢弃。accept回调实际上是在您每次跨过另一个节点时拖动时调用的。下面是一个简单的示例实现：

$scope.treeOptions = {
beforeDrop : function (e) {
if (e.source.nodesScope.$parent.$id === e.dest.nodesScope.$parent.$id) {
console.log("siblings, this is allowed");
return $q.resolve();
}
else {
console.log("not siblings");
window.alert("Not siblings! Reject this drop!");
return $q.reject();
}
}
};

这是 plunkr 显示一个简单的例子： http://plnkr.co/edit/6PD6PrD3wRduOjOQzuFN