Angular-ui-tree keep nodes to their level on drag and drop

Question

How can I prevent child nodes from becoming a top level node and also prevent parent nodes from being dropped under another parent node. I want to allow rearrangement of child nodes and parent nodes but only allow them to drop at their current level.

Answer 1

This can be done by adding a data-type attribute to the ui-tree-node element that corresponds to the level of the item. Then by checking the level of the node in the tree options accept callback.

In view...

<li ng-repeat="i in items" ui-tree-node data-type="top-level">
</li>

In code...

        $scope.treeOptions = {
            accept: function(sourceNodeScope, destNodesScope, destIndex) {

                var source = sourceNodeScope.$element.attr('data-type');
                var dest = destNodesScope.$element.attr('data-type');

                if (source == 'child' && dest == 'top-level'){
                    //allow child nodes to be placed under top-level nodes
                    return true;
                }else{
                    return false;
                }
            }
        };