HTML5 Drag and drop not working as expected on Angular 6

Issue

I'm trying to implement a very simple drag and drop feature to an Angular 6 app, but I'm having some troubles I wasn't expecting.

Here's an example of what I'm trying to do:

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

And the problems I'm facing:

On Chrome, setting the dragged data on the dragstart event, handled by the method itemDragStart, using e.dataTransfer.setData('itemData', JSON.stringify(item)); does nothing. This works as expected on Firefox:

Also, the drop event handler is never called, neither on Chrome nor on Firefox. This is the template markup with the event handlers definition:

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

The method dragDrop is never called, strangely dragLeave is called instead when dropping the boxes into the container.

What's wrong with the code? Thanks in advance,

Solution

Just by chance, I found a similar question on Stackoverflow with the solution:

HTML 5 Drag & Drop with Angular 4

It's as simple as adding a dragover event handler on the drop container with the following code:

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

Now it works as expected.

Answered By - Fel