ngDraggable 在拖动结束后避免 ng-click

Posted 2023-05-08

【中文标题】ngDraggable 在拖动结束后避免 ng-click

【英文标题】：ngDraggable avoid ng-click after drag end

【发布时间】：2015-12-15 23:41:15

【问题描述】：

我对 ng-drag 元素进行了 ng-click，当我开始移动元素时一切正常，但是当我停止它时，该元素激活了我的 ng-click，我怎样才能避免 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>

我正在使用ngDraggable。我尝试使用ng-drag-success，但没有成功。

【问题讨论】：

试试ng-drop-success?

ng-drag-success 完成了这项工作，但它在大多数情况下都不起作用。一般来说，我相信有办法告诉我们在拖动时不要使用 ng-click。

您可能需要等待here 的答案，或者您可以尝试实现与here 中提到的类似的东西？

【参考方案1】：

我做了一个指令 (alClick)，它只是 ng-click，但如果默认情况下按下持续时间长于 750 毫秒，则会取消任何点击。因此，拖动或滑动时不会触发 click 或 tap 事件。

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

【讨论】：

就是这样 - 答案是完整的并针对问题进行了定制。

很好的指令！对于桌面设置，我想知道是否不仅考虑是否应该基于时间点击，还可以考虑基于移动的像素？我可以做一个仍然触发点击的“快速拖动”。好像还不支持，不过我没看过代码库。

【参考方案2】：

在 David Zemens 的帮助下，我做了什么。我发现我可以使用

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

在我的 ng-click 函数中，我添加了如下内容：

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

通常它可以解决问题。当拖动开始时，它广播它正在开始，当它结束时，ng-click 起作用，在我们的例子中，它只是说拖动结束。

【讨论】：

其实我是这样做的，而且效果很好，忘记回答这个问题了。谢谢。