0

I am developing a tree view to show list of categories using AngularJS. I used this git repository.

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>

I am able to implement drag and drop elements in the tree. I want to limit the drag and drop capability to only sibling-level elements.

I tried below but still no luck.

JS

$scope.treeOptions = {

    accept: function (sourceNodeScope, destNodesScope, destIndex) {

        if (sourceNodeScope.$parent.$id === destNodesScope.$parent.$id)
            return true;
        else
            return false;

    }
}

I cannot find much about this requirement on GitHub repository. Any help or useful link is highly appreciated.

Sudarshana Dayananda
  • 5,165
  • 2
  • 23
  • 45
  • 1
    There is a `beforeDrop` callback that you can use. Basically, inside that callback, check to see whether the dest node passed into it is a sibling of the source node. Then, return a promise that is either resolved or rejected. See the `beforeDrop` notes here: https://github.com/angular-ui-tree/angular-ui-tree – james00794 Oct 10 '18 at 08:30
  • Thanks. I did not try `beforeDrop` method yet. I will give a try. – Sudarshana Dayananda Oct 10 '18 at 11:02

1 Answers1

1

Your logic is basically ok, but the callback you are using is not the right one. Angular-ui-tree has a beforeDrop callback that allows you to return a promise, and based on the result, will accept or reject the drop. The accept callback is actually called while you are dragging every time you cross another node. Here is a simple sample implementation:

$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();
          }
        }
     };

Here is plunkr showing a simple example: http://plnkr.co/edit/6PD6PrD3wRduOjOQzuFN

james00794
  • 1,137
  • 7
  • 14