CODEWITHSUNDEEP
angularjsdraggableangularjs-ng-click
Honchar Denys
Honchar Denys

Reputation: 1508

ngDraggable avoid ng-click after drag end

i have ng-click on the ng-drag element, when i am starting to move the element it's everything ok, but when i stop it, that element activate my ng-click, how can i avoid that ng-click?

<div ng-click="unselectImage(image);" ng-drag="true" ng-drag-data="'multipleItems'" ng-center-anchor="true" data-allow-transform="false" ng-drag-success="selectImage(image);"></div>

I am using ngDraggable. I tried to use ng-drag-success without success.

Upvotes: 2

Views: 4386

Answers (2)

Mohammed A. Al Jama
Mohammed A. Al Jama

Reputation: 511

I made a directive (alClick) which is merely ng-click but cancels any click if the press duration is longer than 750ms by default. Therefore, no click or tap event will fire when dragging or swiping.

<div al-click="unselectImage(image);" ng-drag="true" ng-drag-data="'multipleItems'" ng-center-anchor="true" data-allow-transform="false" ng-drag-success="selectImage(image);"></div>

Upvotes: 4

Honchar Denys
Honchar Denys

Reputation: 1508

What i did, with help of David Zemens. i figure it out that i can use

$rootScope.$on('draggable:start', function (data) {
    isDragging=true;
});

and inside my ng-click function i add something like this:

$scope.unselectImage = function (image) {
    if(isDragging) isDragging=false;
    else{
        // do the magic
    }
}

and generally it do the trick. When drag start, it broadcast that it is starting, and when it end's ng-click work out, in our case it simply say that drag is over.

Upvotes: 2

Related Questions