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

Answer 2

I ended up using a directive and cdkDropListDisabled because I had a bunch of elements that should stop dragging.

js

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[stopDragging]"
})
export class StopDragging
{   
    @Input() stopDragging: {bool: boolean};
    @HostListener('mouseenter', ['$event'])
    public disable(event: any): void
    { 
        debugger;
        this.stopDragging.bool = true
    }

    @HostListener('mouseleave', ['$event'])
    public enable(event: any): void
    {
        debugger;
        this.stopDragging.bool = false;
    }
}

template

<ELEMENT ... [cdkDropListDisabled]="dragListDisabled.bool">

    <input [stopDragging]="dragListDisabled">

...