javascript - Html 5 Drop 事件有时不会触发（例如 10/15 次）

Question

W3学校掉落事件示例

我在我的 Angular 应用程序中使用 HTML5 拖放 api。完成实施后，我意识到 drop 事件在一些下降后无法突然触发一个实例。我从 div 列表中拖动并将它们放置在相同的放置位置，并且放置事件无法在中间触发。

因此，我尝试使用以下简单代码，但在某些（7-15）掉落后无法触发。w3 学校官方掉落事件示例中的同样问题。

<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'
  }
];