angular-ui-tree: dropped location + catch dropped event in directive

Question

I'm using angular-ui-tree for building a tree of items in my app. I'm using its drag & drop feature and I need to know when & where (on what element) the dropping occurs.

For example, I drag item1, and drop it on a panel. I want the panel to display the item name. (each item has a name property). the panel is just a simple div with text inside.

I saw in the documentations that I can access the "dropped" event in my controller. But I don't understand how to change the panel content according to the dragged & dropped item.

Answer 1

As in documentations $callbacks (type: Object)

$callbacks is a very important property for angular-ui-tree. When some special events trigger, the functions in $callbacks are called. The callbacks can be passed through the directive.

you define the events in a treeOptions collection

     myAppModule.controller('MyController', function($scope) {
     // here you define the events in a treeOptions collection
      $scope.treeOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
          return true;
        },
        dropped: function(e) {
          console.log (e.source.nodeScope.$modelValue);     
        }
      };

    });

then in your tree div add callbacks="treeOptions" which you defined above in the controller

<div ui-tree callbacks="treeOptions">
  <ol ui-tree-nodes ng-model="nodes">
    <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
  </ol>
</div>

then you can access the old parent from here

e.source.nodeScope.$parentNodeScope.$modelValue

and you can access the new parent from here

e.dest.nodesScope.$parent.$modelValue