Is it possible to drag a FAB without activating its click event?

[Artux-White]

<div class="fab-add" ngDraggable>
     <button mat-mini-fab color="primary" (click)="runStuff()" >
          <mat-icon>add</mat-icon>
     </button>
</div>

[DanielCaspers]

Just some parting thoughts, but haven't tried any of this code out myself.

1. Could you get away with something like an $event.stopPropogation() in the containing div
2. Have you tried adding ngDraggable to the button directly? Will that work for you?
3. Can you use different events than click, such as mouseup? https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag

[coccor]

You can check if the FAB moved or it was only clicked.

  <div ngDraggable (endOffset)="onMoveEnd($event)">
      <button (click)="runStuff()">Add</button>
  </div>

  lastPos = { x: 0, y: 0 };
  offset = { x: 0, y: 0 }

  runStuff() {
    if (this.offset.x === 0 && this.offset.x === 0) {
      console.log('clicked')
    }
  }

  onMoveEnd(event) {
    this.offset = { x: event.x - this.lastPos.x, y: event.y - this.lastPos.y };
    this.lastPos = event;
  }