Both "clickable" and "draggable" area

Question

I have a list of element inside an ng-repeat for which elements are clickable and draggable : if I click I display, and if I drag ... I drag the element.

When dragging I am displaying a circle with the number of element to drag.

My problem is that when a click, the drag circle is displayed. Whereas I just want to click and not drag.

Is there a way to set like 2s when clicking, like a long press action (with the mouse) to distinguish the click from the drag actions ?

It is similar to this post but now I want to prevent the drag when clicking (in the Angular way).

Here some markup :

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

I am using ngDraggable directive.

Here some code if it helps :

.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
        };

May be it could be good to have a directive like ng-click-or-drag, when the click is more than 2s it is interpreted as a drag.

Any progress on this? I am having the same exact issue. – Pathsofdesign Sep 23 '14 at 17:35 — Pathsofdesign, Sep 23 '14 at 17:35

score 1 · Answer 1 · answered Oct 09 '14 at 06:58

The issue has been solved here partially. https://github.com/fatlinesofcode/ngDraggable/issues/12. Posting in case it is useful to someone else browsing the question.

Setting ng-prevent-drag="true" on any element that you do want to initiate drag action, disables the drag action initiation on that object.

I guess benek who has asked this question is also involved in the discussion in the link above. he has indicated that this breaks on ipad, however I have tested this on laptop where it works.

score 1 · Answer 2 · answered Jul 20 '18 at 21:05

1

I have implemented ng-drag-after-timeout="2000" attribute which allows to manage this. The patch is here https://github.com/advantiss/ngDraggable/commit/51bd0e16b3f363935b249b2ee185968f4999f87d

answered Jul 20 '18 at 21:05

AdvanTiSS

336
3
8

score 0 · Answer 3 · answered Oct 28 '19 at 21:49

0

I fixed this by making my image (which was a problem) a vice .

The DIV had a background-image: url();

Problem solved for me

answered Oct 28 '19 at 21:49

Peter The Angular Dude

1,112
5
26
53

Both "clickable" and "draggable" area

3 Answers3