事件传播cdk拖动

Question

当我在MenuJquery.js:237 Uncaught TypeError: Cannot read property '0' of undefined at HTMLDivElement.<anonymous> (MenuJquery.js:237) at HTMLDivElement.dispatch (jquery.min.js:2) at HTMLDivElement.v.handle (jquery.min.js:2) 内并且四处拖动时，如何防止拖动。 我只希望input充当pink-meat。

!!! STACKBLITZ !!!

html

drag-handle

js

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

到目前为止，它不起作用：/。

Answer 1

我会阻止mousedown而不是click事件：

(mousedown)="stopIt($event)"

Forked Stackblitz

对于移动设备，也许您还会寻找防止touchstart事件的机会

Answer 2

我最终使用了指令cdkDropListDisabled，因为我有一堆应该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;
    }
}

模板

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

    <input [stopDragging]="dragListDisabled">

...