使用@angular/cdk/drag-drop 时触发 dragOver 事件

Question

我在我的应用程序中使用 @angular/cdk/drag-drop 模块。拖放按预期工作，但我想在拖动项目位于放置区域顶部时执行一些操作。

我试过这段代码，但似乎没有调用onDragOver方法

<div cdkDropList>
    <span (dragover)="onDragOver($event)">...</span>
<div>

onDragOver($event){
    console.log('ondragover');
}

@angular/cdk/drag-drop 中是否有任何内置方法可以实现此目的？

Answer 1

根据文档，这是 CdkDropList 的可用事件：（所有这些事件都是 output() EventEmitter）

https://material.angular.io/cdk/drag-drop/api#CdkDropList

@Output('cdkDropListDropped') dropped - Emits when the user drops an item inside the container.

@Output('cdkDropListEntered') entered - Emits when the user has moved a new drag item into this container.

@Output('cdkDropListExited') exited - Emits when the user removes an item from the container by dragging it into another container.

@Output('cdkDropListSorted') sorted - Emits as the user is swapping items while actively dragging.

使用@angular/cdk/drag-drop 时触发 dragOver 事件

Firing dragOver event while using @angular/cdk/drag-drop

drag-and-drop

angular-material

angular