HTML5拖放在Angular 6上无法正常工作

Question

我正在尝试为Angular 6应用程序实现非常简单的拖放功能，但遇到了一些我没想到的麻烦。

这是我要做的事的一个例子：

https://stackblitz.com/edit/angular-w7lupc

我所面临的问题：

在Chrome上，使用dragstart设置由方法itemDragStart处理的e.dataTransfer.setData('itemData', JSON.stringify(item));事件上的拖动数据没有任何作用。可以在Firefox上正常运行：

此外，在Chrome和Firefox上都不会调用drop事件处理程序。这是带有事件处理程序定义的模板标记：

<div class="container" #dropContainer
  (dragenter)="dragEnter($event)"
  (dragleave)="dragLeave($event)"
  (drop)="dragDrop($event)">

从不调用方法dragDrop，而将盒子放入容器时奇怪地调用了dragLeave。

代码有什么问题？预先感谢，

Answer 1

偶然地，我在Stackoverflow上找到了一个与此解决方案类似的问题：

HTML 5 Drag & Drop with Angular 4

就像使用以下代码在放置容器上添加dragover事件处理程序一样简单：

listDragOver(e: DragEvent) {
  e.preventDefault();
}

现在它可以正常工作了。

Answer 2

您可以尝试这段代码。

 public ondragover(event: Event): void {
    event.stopPropagation();
    event.preventDefault();     
  }
  public ondrop(event): void {
    event.stopPropagation();
    event.preventDefault();  

  }