CODEWITHSUNDEEP
angularjstwitter-bootstrap-3angular-directiveangular-ui-tree
Tamar Cohen
Tamar Cohen

Reputation: 1292

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

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.

Upvotes: 5

Views: 7948

Answers (4)

jdbs
jdbs

Reputation: 1748

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.

Upvotes: 0

Eshwer Gowda K V
Eshwer Gowda K V

Reputation: 27

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:)

Upvotes: 2

Ibrahim Kais Ibrahim
Ibrahim Kais Ibrahim

Reputation: 840

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

Upvotes: 15

Phil
Phil

Reputation: 320

You access the "dropped" item like this.

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

Upvotes: 1

Related Questions