拖放的角度问题

Question

我有一个由mat-card组成的简单列表。在将文件拖到上方并对文件拖放进行操作时，我想突出显示mat-card，但是我有两个主要问题：

• 有时，当拖动速度太快时，mat-card的状态未正确更新。所以在某些情况下，我有多张高牌。
• 放下事件e.preventDefault()无效。该文件在浏览器中打开，这不是预期的行为。

我尝试了很多事情，甚至手动添加/删除了事件监听器，但没有任何效果。希望有人会帮助：）

在这里您可以找到用stackblitz制作的演示，因此可以更轻松地进行调试： https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted

更新： 使用Angular v5和Angular Material 2

Answer 1

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

对于第二个问题，将主机侦听器添加到window:dragover事件中以防止使用默认值：

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

Stackblitz

Answer 2

经过一番摸索，需要阻止dragover事件和drop事件，以阻止浏览器打开文件。为了修复多次应用的类，我通过使用ngClass而不是ngIf来解决了这个问题，它看起来工作起来更加一致。查看this stackblitz进行演示。