CODEWITHSUNDEEP
angularhtml
Fel
Fel

Reputation: 4828

HTML5 Drag and drop not working as expected on Angular 6

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:

Differences between Chrome and 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,

Upvotes: 1

Views: 3633

Answers (3)

Lojith Vinsuka
Lojith Vinsuka

Reputation: 1049

Add draggable="true" to the dragging element.

  <div #dragElement
      (drag)="drag($event)"
      (dragstart)="dragStart($event)"
      (dragend)="dragEnd($event)"
      draggable="true">

Upvotes: 0

Arun
Arun

Reputation: 151

You can try this piece of code it works.

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

  }

Upvotes: 0

Fel
Fel

Reputation: 4828

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.

Upvotes: 1

Related Questions