CODEWITHSUNDEEP
angular
eixcs
eixcs

Reputation: 1989

Click event firing after dragging

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>

Upvotes: 2

Views: 3392

Answers (2)

Martin Cremer
Martin Cremer

Reputation: 5572

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

Upvotes: 6

Priyesh Diukar
Priyesh Diukar

Reputation: 2142

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

Upvotes: 6

Related Questions