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?

Answer 1

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

Answer 2

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