拖放的角度问题

Posted 2023-03-13

【中文标题】拖放的角度问题

【英文标题】：Angular issue with Drag and Drop

【发布时间】：2019-03-23 07:01:56

【问题描述】：

我有一个由mat-card 组成的简单列表。我想在拖动文件时突出显示 mat-card 并在文件放置上做一些事情，但我有两个主要问题：

有时，当拖动速度过快时，mat-card 的状态不会正确更新。所以在某些情况下，我会突出显示多张卡片。 e.preventDefault() on drop 事件不执行任何操作。文件在浏览器中打开，这不是预期的行为。

我尝试了很多东西，甚至手动添加/删除事件侦听器，但没有任何效果。希望有人能帮忙:)

在这里你可以找到一个在stackblitz 制作的演示，这样可以更容易调试： https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted

更新： 使用Angular v5 和Angular Material 2

【问题讨论】：

不确定您使用的是什么版本的材料，但 CDK 版本 7.0.0-beta.0 引入了拖放支持 - docs available here。

@p4r1 使用版本 2.0.0-beta.12，很遗憾我无法更改它

【参考方案1】：

经过一番摸索，需要阻止dragover 事件以及drop 事件，以阻止浏览器打开文件。为了修复多次应用的类，我使用ngClass 而不是ngIf 修复了这个问题，它似乎更一致地工作。查看this stackblitz 以获取演示。

【讨论】：

很棒很棒很棒！非常感谢

【参考方案2】：

对于第一个问题，这是因为 Angular 生命周期不够快。要么你停止使用 Angular 的上下文来更新你的元素，要么你找到另一种方式来通知用户他在应用程序之上。

对于第二个问题，为window:dragover事件添加一个主机监听器以防止默认：

@HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) 
  event.preventDefault();

Stackblitz