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

【问题标题】：Firing dragOver event while using @angular/cdk/drag-drop使用 @angular/cdk/drag-drop 时触发 dragOver 事件
【发布时间】：2020-07-05 08:50:32
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angular angular-material drag-and-drop

【解决方案1】：

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

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

@Output('cdkDropListDropped') 丢弃 - 当用户将物品放入容器中时发出。

@Output('cdkDropListEntered') 输入 - 当用户将新的拖动项移动到此容器中时发出。

@Output('cdkDropListExited') 退出 - 当用户通过拖动将项目从容器中移除时发出放入另一个容器中。

@Output('cdkDropListSorted') 已排序 - 当用户在主动拖动时交换项目时发出。

【讨论】：

我正在尝试实现将一个项目拖到另一个项目上会导致后者的边框变为红色的效果。但是意识到（dragover）似乎没有生效。此处列出的 cdk 内置事件将如何解决该问题？这是否意味着 (dragover) 不能在 Angular 中使用？
@Bruce - 我也有同样的问题。从我可以看到cdkDropListEntered 事件和cdkDropListExited 事件不会在鼠标悬停和鼠标悬停时触发。您会期望退出事件在您离开列表时触发，而 enter 事件在您进入列表时触发。然而，实际发生的情况是，一旦您将一个项目拖入目标列表，它们就会同时触发 - 表明它离开了第一个列表，并且在放置时将到达第二个列表。我还没有解决您的问题的方法:(