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.

Ibrahim Kais Ibrahim · Answer 1 · 2016-10-17T10:13:09.817

15

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

edited Oct 17 '16 at 10:13

answered Feb 02 '15 at 07:15

Ibrahim Kais Ibrahim

840
10
24

2

I don't know if this has anything to do with the version, I am using Angular UI Tree v2.1.5. And your solution only works if I change this:
into this:
– bokkie Mar 16 '15 at 09:17
sorry for being late. I'm using a [newer version](https://github.com/angular-ui-tree/angular-ui-tree/releases/tag/v2.2.0) and it was working great – Ibrahim Kais Ibrahim Mar 26 '15 at 16:23
@IbrahimKais Can you get the position of the child element? i need to sort the tree, because of this i need to get the position of where the child node is located between the other nodes. can't find a way to get this – DaCh Nov 27 '15 at 11:13
@ DaCh: what is your version and how do you sort? – Ibrahim Kais Ibrahim Nov 30 '15 at 14:10
How can i get curruent dragged element values in dropped callback – Coder Aug 10 '16 at 14:16
@Coder you can navigate inside the event object (e) to find what you want – Ibrahim Kais Ibrahim Aug 11 '16 at 10:48

score 2 · Answer 2 · edited Jan 24 '17 at 10:38

Hey guys i just found it !

$scope.treeOptions = {
            dropped: function (event) {
             //To catch the event after dragged

             //Value of model which is moving
             event.source.nodeScope.$modelValue;

             //Source Parent from where we are moving model
             event.source.nodeScope.$parentNodeScope.$modelValue;

             //Destination Parent to where we are moving model
             //Edit: Use "nodesScope" instead of "nodeScope" for dest object 
             event.dest.nodesScope.$nodeScope.$modelValue;
         }};

Hope it works for you too:)

score 1 · Answer 3 · answered Sep 18 '14 at 22:06

1

You access the "dropped" item like this.

$scope.elOptions = {
    dropped: function(e) {
        console.log (e.source.nodeScope.$modelValue);     
    }
};

answered Sep 18 '14 at 22:06

Phil

200
10

score 0 · Answer 4 · answered Oct 22 '19 at 10:00

Addional information which might be useful can be found on this issue of the project : https://github.com/angular-ui-tree/angular-ui-tree/issues/272

For example in my case, I was dragging from one tree to another one, and in this case, the dropped function must be overriden in the SOURCE tree options (and not the DESTINATION one like I initially thought).

The discussion in the related issue helped me a lot to find this out.

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

4 Answers4