HTML5 Drag and drop not working as expected on Angular 6

Question

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,

Fel · Accepted Answer · 2018-09-20 10:55:07Z

1

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 Sep 20, 2018 at 10:55

Fel

4,89812 gold badges46 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun · Accepted Answer · 2019-06-24 12:25:37Z

0

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();  

  }

answered Jun 24, 2019 at 12:25

Arun

1511 silver badge5 bronze badges

Comments

Lojith Vinsuka · Accepted Answer · 2022-08-16 06:12:15Z

0

Add draggable="true" to the dragging element.

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

answered Aug 16, 2022 at 6:12

Lojith Vinsuka

1,0471 gold badge14 silver badges8 bronze badges

Collectives™ on Stack Overflow

HTML5 Drag and drop not working as expected on Angular 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related