Click event firing after dragging

Question

Hey I'm using Angular material Drag and drop. Everything is working fine but after each drag it triggers the click event and it's really annoying. How can I stop this?

<div
  cdkDrag
  [cdkDragDisabled]="shiftWorker.locked"
  (cdkDragEnded)="onDragEnded(job, shiftWorker, $event)"
  (cdkDragStarted)="onDragStart($event)"
  [cdkDragData]="job"
  *ngIf="job.timelineInfo.isInDayShift === firstHalfDay"
  (click)="openWorkDetails(job.id)"
></div>

In the body of `onDragEnded` add `$event.preventDefault();`. Does that fix the issue? (*this assumes that `$event` is also the name of the 3rd parameter in that method*) — Igor, Jun 12 '19 at 10:43
@Igor Tried that. When using this, the dragEnd functionality doesn't work, but the click event still happens :/ — eixcs, Jun 12 '19 at 10:45

score 6 · Accepted Answer · answered Jun 12 '19 at 11:00

6

You can use a boolean to keep a track of this situation:

 var dragging = false;
 (cdkDragStarted): function(event, ui) {
    dragging = true;
    ...your code
 }

(click): function(event) {
    if (!dragging) {
        ...your code
    }
    else {
        dragging = false;
    }
});

answered Jun 12 '19 at 11:00

Priyesh Diukar

2,032
1
15
19

need to do same onDrageEnd – Avin Kavish Jun 12 '19 at 11:14
Ended up doing this. Didn't need to do the same on onDragEnd. Thanks! – eixcs Jun 12 '19 at 11:42
This solution worked. The one from Martin did not. – Augusto Barreto Feb 03 '22 at 14:58
@AvinKavish `onDragEnded` should **not** reset dragging, since it will be called before click and hence would always reset the flag -> would trigger click after dragging – r3mark Sep 27 '22 at 01:30
You can reset dragging on (cdkDragDropped) if you need click events – keschra Mar 07 '23 at 11:01

Martin Cremer · Answer 2 · 2020-05-07T16:31:24.257

5

Turning off pointer events for the element while it's being dragged prevents a click event afterwards:

template:

<div cdkDrag #draggable="cdkDrag" 
     [class.pointer-events-none]="draggable._dragRef.isDragging()" ...

styles.scss:

.pointer-events-none {
  pointer-events: none;
}

edited May 07 '20 at 16:31

answered May 07 '20 at 16:19

Martin Cremer

5,191
2
32
38

Click event firing after dragging

2 Answers2

Linked