Angular JS (angular-ui-tree) ng-click conflict vs drag start event

Question

I am currently using angular-ui-tree library and I am trying to achieve following behavior:

When user just click on 'draggable node' it triggers ng-click function, if user click and start dragging ng-click is ignored and regular drag-n-drop starts.

I have following html structure:

<div ui-tree="rootTree" ng-controller="Controller">
    <div ui-tree-nodes="" ng-model="nodes">
        <div ng-repeat="node in nodes" ui-tree-node="" ng-click="selectNode(node)" >
            <div ui-tree-handle="">
            ...
            </div>
        </div>
    </div>
</div>

Current behavior is that drag-n-drop starts immediately on 'mousedown' and there is no way to distinguish 'click' from attempt to start dragging

Here is the library code which triggers drag-n-drop of the node uiTreeNode.js

var bindDrag = function() {
   element.bind('touchstart mousedown', function (e) {
   if (!scope.$treeScope.multiSelect) {
      dragDelaying = true;
      dragStarted = false;
      dragTimer = $timeout(function() {
         dragStartEvent(e);
         dragDelaying = false;
      },    scope.$treeScope.dragDelay);
   } else {
      toggleSelect(e);
   }
   });
   element.bind('touchend touchcancel mouseup', function() {
      $timeout.cancel(dragTimer);
   });
};

Corey Adler · Accepted Answer · 2014-12-30 17:04:49Z

10

I just had the same issue and I solved it by increasing the data-drag-delay to 100, Try:

ui-tree="rootTree" ng-controller="Controller" data-drag-delay="100"

edited Dec 30, 2014 at 17:04

Corey Adler

16.2k18 gold badges70 silver badges80 bronze badges

answered Dec 30, 2014 at 16:47

Abdelmoniem Ali

1013 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

practical programmer · Accepted Answer · 2016-05-30 14:14:10Z

2

It's quite old question, but if you don't want to have delay you can register dropped() callback and execute your click action if index did not change. For example:

dropped: function(event){
    //if element was not moved, use click event
    if(event.source.index == event.dest.index){
        $scope.someAction();
    }
}

answered May 30, 2016 at 14:14

practical programmer

1,65812 silver badges17 bronze badges

1 Comment

Richard Fazzi Over a year ago

when you define your ui-tree you can define it with options like ui-tree="options" inside this options object you can define a lot of callbacks functions like dropped. See github.com/angular-ui-tree/angular-ui-tree#methods-in-callbacks

Collectives™ on Stack Overflow

Angular JS (angular-ui-tree) ng-click conflict vs drag start event

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related