event propagation cdk drag

Question

How can I prevent dragging when I'm inside my input and I'm dragging around. I only want the pink-meat to act as a drag-handle.

!!! STACKBLITZ !!!

html

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    <input [placeholder]="movie" (click)="stopIt($event)" (mousemove)="stopIt($event)">
  </div>
</div>

js

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

  stopIt(e) {
    e.stopPropagation();
  }

So far its not working :/.

Answer 1

I would prevent mousedown instead of click event:

(mousedown)="stopIt($event)"

Forked Stackblitz

Also for mobile devices maybe you will be looking for preventing touchstart event