angularjs - "clickable"和 "draggable"区域

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

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

拖动时,我会显示一个圆圈,其中包含要拖动的元素的数量。

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

有没有办法在点击时设置像2s一样的时间,就像长按 Action (用鼠标)来区分点击和拖动 Action

类似于 this post但现在我想防止单击时拖动(以 Angular 方式)。

这里有一些标记:

<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 秒时,它会被解释为拖动。

最佳答案

问题已在这里部分解决。 https://github.com/fatlinesofcode/ngDraggable/issues/12 。发布以防其他人浏览该问题有用。

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

我猜提出这个问题的benek也参与了上面链接中的讨论。他表示这在 iPad 上会损坏,但我已经在笔记本电脑上测试过它可以正常工作。

关于angularjs - "clickable"和 "draggable"区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25885804/

相关文章:

javascript - AngularJS:在编译之前获取指令内容

angularjs - 在属性中带有过滤器的 Angular 自定义指令

javascript - 如何使用 ng-animate 以与列出元素相同的方式为表格行设置动画?

GWT 在树内和树网格之间拖放

javascript - HTML5 拖放 - 不适用于 iOS 12.1.2(Safari 和 Chrome)

c# - 将一个控件拖放到winform中的另一个控件

javascript - 为什么不能在具有隔离作用域的指令模板中访问 $rootScope?

javascript - 如何在 AngularJS 中设置登录页面

javascript - Angular 模型变量在 DOM 更新之前更新过早,导致 UI 为 "behind"?

javascript - 如何测试我的服务是否使用 jasmine 和 angularjs 返回数据