如何将拖放功能限制为 angular-ui-tree 中的同级元素？

Question

我正在开发树视图以使用 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 存储库中找不到关于此要求的太多信息。非常感谢任何帮助或有用的 link。

Answer 1

你的逻辑基本没问题，但是你用的回调不对。 Angular-ui-tree 有一个 beforeDrop 回调，允许您 return 承诺，并根据结果接受或拒绝掉落。 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

如何将拖放功能限制为 angular-ui-tree 中的同级元素？

How to limit drag and drop capability to only sibling-level elements in angular-ui-tree?

angularjs

angular-ui-tree