2

W3 schools drop event example

I am using HTML5 drag drop api in my angular application.After Completing the implentation I realised that drop event fail to fire suddenly for one instance after some drops. I am dragging from a list of div's and dropping them on same drop location, and drop event fail to fire in the middle.

So I tried with the following simple code and it fails to fire after some(7-15) drops.Also the same issue in w3 schools official drop event example .

<div class="row">
  <div class="col-md-4">
    <ng-container *ngFor="let item of list ; let i = index">
      <div style="border: 1px solid grey; margin:10px" draggable="true" (dragstart)="testDrag($event)">{{item.label}}</div>
    </ng-container>
  </div>
  <div class="col-md-4" (dragover)="testDragOver($event)" (drop)="testDrop($event)" style="border: 1px solid grey; width: 300px;height: 200px">
    Drop Location
  </div>
</div>

testDrag(event) {
  console.log(event.target);
  console.log('Test drag called ');
}
testDragOver(event) {
  event.preventDefault();
  const a = event.target;
  console.log('Test dragOver called ');
}
testDrop(event) {
  event.preventDefault();
  console.log(event.target);
  console.log('Test drop called ');
}

this.list = [{
    'label': 'ItemA1'
  },
  {
    'label': 'ItemA2'
  },
  {
    'label': 'ItemA3'
  }
];
Rick
  • 4,030
  • 9
  • 24
  • 35
khvr000
  • 31
  • 1
  • 6
  • Not an answer to your question, but you name your `dragstart` handler `testDrag`. Keep in mind/be aware that 'dragstart' and 'drag' are two separate HTML Drag and Drop API events. `dragstart` for the beginning of a drag (essentially `mousedown` and `mousemove`) while `drag` is fired every few hundred milliseconds as an element or text selection is being dragged by the user. You may be aware of this, but it threw me off for a second as I read your code. – twgardner2 Jul 14 '18 at 19:27
  • Hi - were you able to figure out a cause for or solution to the issue above? – AshD Apr 24 '23 at 18:49

0 Answers0