事件传播 cdk 拖动

Question

当我在 input 里面并且四处拖拽时，如何防止拖拽。我只希望 pink-meat 充当 drag-handle。

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

到目前为止它没有工作:/.

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

...

事件传播 cdk 拖动

event propagation cdk drag

event-propagation

angular

angular-cdk

html

js

js

模板