Перетаскивание HTML5 не работает должным образом на Angular 6

Question

Я пытаюсь реализовать очень простую функцию перетаскивания в приложение Angular 6, но у меня возникают некоторые проблемы, которых я не ожидал.

Вот пример того, что я пытаюсьсделать:

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

И проблемы, с которыми я сталкиваюсь:

В Chrome установка перетаскиваемых данных для события dragstart, обработанного методомitemDragStart, использование e.dataTransfer.setData('itemData', JSON.stringify(item)); ничего не делает.Это работает, как и ожидалось, в Firefox:

Кроме того, обработчик событий drop никогда не вызывается ни в Chrome, ни в Firefox.Это разметка шаблона с определением обработчиков событий:

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

Метод dragDrop никогда не вызывается, как ни странно, dragLeave вызывается вместо этого, когда ящики опускаются в контейнер.

Что не так с кодом?Заранее спасибо,

Answer 1

Вы можете попробовать этот кусок кода, он работает.

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

  }

Answer 2

Случайно я нашел похожий вопрос по Stackoverflow с решением:

HTML 5 Drag & Drop с Angular 4

Это так же просто, как добавитьdragover Обработчик событий в контейнере сброса со следующим кодом:

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

Теперь он работает как положено.