HTML5 拖放在 Angular 6 上无法按预期工作答案

【问题标题】：HTML5 Drag and drop not working as expected on Angular 6HTML5 拖放在 Angular 6 上无法按预期工作
【发布时间】：2018-09-20 10:28:31
【问题描述】：

我正在尝试为 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 在将盒子放入容器时被调用。

代码有什么问题？提前致谢，

【问题讨论】：

标签： angular html

【解决方案1】：

一个偶然的机会，我在 Stackoverflow 上发现了一个类似的问题和解决方案：

HTML 5 Drag & Drop with Angular 4

就像在 drop 容器上添加 dragover 事件处理程序一样简单，代码如下：

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

现在它可以按预期工作了。

【讨论】：

【解决方案2】：

你可以试试这段代码是否可行。

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

  }

【讨论】：