两者都可点击"和#34;可拖动"区域

时间:2014-09-17 08:33:15

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

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

拖动时我正在显示一个带有要拖动的元素数的圆圈。

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

有没有办法在点击时设置像2s,例如长按动作(用鼠标)区分点击与拖动动作

它与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这样的指令可能会很好,当点击次数超过2s时,它会被解释为拖动。

3 个答案:

答案 0 :(得分:1)

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

设置ng-prevent-drag =&#34; true&#34;在您想要启动拖动操作的任何元素上,禁用该对象上的拖动操作启动。

我想benek提出这个问题的人也参与了上述链接中的讨论。他已经表示这会在ipad上出现问题,但是我已经在笔记本电脑上进行了测试。

答案 1 :(得分:1)

我已经实现了depends "ohai"属性,该属性可以对其进行管理。 补丁在这里https://github.com/advantiss/ngDraggable/commit/51bd0e16b3f363935b249b2ee185968f4999f87d

答案 2 :(得分:0)

我通过使我的图片(有问题)成为恶习来解决此问题。

DIV具有背景图片:url();

问题为我解决了