Angular UI Tree: Get old and new parent of node

Question

I created two trees and when I move a node from one tree to another I would like to know names of old and new tree. I added data-tree-name="unsorted" in ui-tree but I don't know how to access it. This is my code:

        <div ui-tree="treeOptions" data-tree-name="unsorted">
            <ol ui-tree-nodes="" ng-model="skill.unsorted">
                <li ng-repeat="sk in skill.unsorted" ui-tree-node>
                    <div ui-tree-handle>
                        @{{ sk.name }}
                    </div>
                </li>
            </ol>
        </div>

         <div ui-tree="treeOptions" data-tree-name="sorted">
            <ol ui-tree-nodes="" ng-model="category">
                <li ng-repeat="cat in category" ui-tree-node>
                    <div ui-tree-handle>
                        @{{ cat.name }}
                    </div>
                    <ol ui-tree-nodes="" ng-model="cat.skills">
                        <li ng-repeat="sk in cat.skills" ui-tree-node>
                            <div ui-tree-handle>
                                @{{ sk.name }}
                            </div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
----------------------------------------------------
$scope.treeOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
            return true;
        },
        dropped: function(e) {
            console.log (e.source.nodeScope);
        }
    };

So how can I get data-tree-name value. Thanks

Answer 1

See the documentation for dropped event in official docs:

dropped(event)

If a node moves it's position after dropped, the nodeDropped callback will be called.

Parameters:

• event: Event arguments, it's an object.

  • source: Source object

    • nodeScope: The scope of source node which was dragged.

    • nodesScope: The scope of the parent nodes of source node when it began to drag.

    • index: The position when it began to drag.

    • cloneModel: Given data-clone-enabled is true, holds the model of the cloned node that is to be inserted, this can be edited before drop without affecting the source node.

  • dest: Destination object

    • nodesScope: The scope of ui-tree-nodes which you just dropped in.

    • index: The position you dropped in.

  • elements: The dragging relative elements.

    • placeholder: The placeholder element.

    • dragging: The dragging element.

  • pos: Position object.

Here is an example:

$scope.treeOptions = {
    dropped: function(event) {
        var sourceNode = event.source.nodeScope;
        var destNodes = event.dest.nodesScope;
        var sortBefore = event.source.index + 1;
        var sortAfter = event.dest.index + 1;
        var dataType = destNodes.$element.attr('data-type');

        // ...
    }
};