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);
});
};
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();
}
}
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With