我正在开发一个树形视图,以使用AngularJS显示类别列表。 我使用了this 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存储库上找不到关于此要求的很多信息。 任何帮助或有用的链接都将受到高度赞赏。
答案 0 :(得分: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();
}
}
};