Question

我在我的角度应用程序中使用了HTML5拖放API，在完成功能设置后，我意识到拖放事件在某些拖放后无法突然触发。我从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'
  }
];

HTML 5 Drop事件有时不触发（例如每10/15次）

0 个答案: