“可点击”和“可拖动”区域答案

【问题标题】：Both "clickable" and "draggable" area“可点击”和“可拖动”区域
【发布时间】：2014-11-11 05:00:08
【问题描述】：

我在 ng-repeat 中有一个元素列表，其中元素是可点击和可拖动的：如果我点击我会显示，如果我拖动...我拖动元素。

拖动时，我会显示一个带有要拖动元素数量的圆圈。

我的问题是，当点击时，会显示拖动圆圈。而我只想点击而不是拖动。

有没有办法在点击时设置为 2s，比如长按动作（用鼠标）来区分点击和拖动动作？

它类似于this post，但现在我想防止点击时拖动（以角度方式）。

这里有一些标记：

<div class="docs-manager-doc box-container" ng-class="{'showActions':doc.showActions}">
    <a class="box-square" ng-href ng-click="docsManager.toggleDocumentSelection(doc)">
        <span class="flaticon-dark" 
            ng-class="{ 'flaticon-video-embed':(!doc.selected && doc.ref && doc.targetType==='EMBEDDED_VIDEO'),
                        'flaticon-{{doc.label | docExtMap}}':!doc.selected && !doc.ref,
                        'flaticon-tick':doc.selected }" ibp-prevent-drag>
        </span>
    </a>

    <a ng-drag="true" ng-drag-data="doc" ng-drag-success="onDragComplete($data)" ng-drag-begin="onDragStart($data)" ng-drag-stop-move="onDragStop($data, $event)">
        <span class="box-drag">  
            <span class="dragging" ng-show="iamdragging" >
                 <span class="flaticon-dark flaticon-small">
                   <p class="flaticon-default-doc">{{docsManager.documents.selected.length}}</p>
                </span>
            </span>
        </span>
    </a>
</div>

我正在使用ngDraggable 指令。

如果有帮助，这里有一些代码：

.controller('DocumentsManagerCtrl', ['...',
    function(...) {

        $scope.iamdragging = false;

        $scope.onDragStop = function(data, event){
            $scope.iamdragging = false;
        };

        $scope.onDragStart = function(data){
            if(!data.selected){
                $scope.docsManager.toggleDocumentSelection(data);
            }
            $scope.iamdragging = true;
        };

        $scope.onDragComplete = function(){
              // do something
        };

可能最好有一个像 ng-click-or-drag 这样的指令，当点击超过 2 秒时，它被解释为拖动。

【问题讨论】：

这方面有什么进展吗？我也有同样的问题。

标签： angularjs drag-and-drop angularjs-directive draggable html5-draggable

【解决方案1】：

此问题已部分解决。 https://github.com/fatlinesofcode/ngDraggable/issues/12。发帖以防其他浏览问题的人有用。

在您确实要启动拖动操作的任何元素上设置 ng-prevent-drag="true" 会禁用该对象上的拖动操作启动。

我猜问这个问题的 benek 也参与了上面链接中的讨论。他表示这在 ipad 上会中断，但是我已经在笔记本电脑上对其进行了测试。

【讨论】：

【解决方案2】：

我已经实现了ng-drag-after-timeout="2000" 属性，它允许管理它。补丁在这里https://github.com/advantiss/ngDraggable/commit/51bd0e16b3f363935b249b2ee185968f4999f87d

【讨论】：

【解决方案3】：

我通过使我的图像（这是一个问题）成为一个恶习来解决这个问题。

DIV 有一个背景图片：url();

为我解决了问题

【讨论】：