Angular 组件中未发生 Drop 事件

问：

我在 Angular 中创建了一个组件，该组件将显示项目列表，使用父级的模板进行行设计。然后，该组件允许拖放行以重新排列项目的顺序。

不幸的是，虽然 dragstart 和 dragover 事件正确触发，但 drop 和 dragend 事件从未达到，我需要使拖动的元素再次完全可见。我不知为什么无法到达这些事件。

HTML格式：

<ng-container *ngFor="let item of listItems; let i = index">
  <div
    draggable="true"
    (dragstart)="onDragStart($event, i)"
    (dragover)="onDragOver($event, i)"
    (drop)="resetDrag()"
    (dragend)="resetDrag()">
    <div [ngClass]="{'hidden': i === dragOverIndex}" style="border:white; border-style:dashed">
        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
    </div>
  </div>
</ng-container>

TS：

import { Component, Input, ContentChild, TemplateRef, OnInit } from '@angular/core';

  @Component({
    selector: 'draggable-list',
    templateUrl: './draggable-list.component.html',
    styleUrls: ['./draggable-list.component.css']
  })
  
   export class DraggableList implements OnInit
   {
    @Input() listItems = [];
    @ContentChild(TemplateRef) itemTemplate!: TemplateRef<any>;
    previousList = [];
    dragOverIndex: number = -1;
    draggedItemIndex: number = -1;
  
    constructor() { }
    
    ngOnInit(): void { }  
  
    onDragStart(event: DragEvent, index: number): void 
    {
      this.draggedItemIndex = index;
      this.previousList = JSON.parse(JSON.stringify(this.listItems));
      if(event.dataTransfer)
        event.dataTransfer.setData('text/plain', this.listItems[index]);
    }
  
    onDragOver(event: DragEvent, index: number): void 
    {
      event.preventDefault();
      this.dragOverIndex = index;
      this.listItems = JSON.parse(JSON.stringify(this.previousList));
      const draggedItem = this.listItems[this.draggedItemIndex];
      this.listItems.splice(this.draggedItemIndex, 1);
      this.listItems.splice(index, 0, draggedItem);
    }
  
    resetDrag()
    {
      this.previousList = [];
      this.dragOverIndex = -1;
      this.draggedItemIndex = -1;
    }
   }

这是父组件使用我的 draggable-list 的 html 部分：

    <draggable-list [listItems]="colors">
        <ng-template let-color>
            <div>
              <p>{{color.name}}</p>
              <p>{{color.value}}</p>
              <button>{{color.rangeMin}}</button>
              <button>{{color.rangeMax}}</button>
            </div>
          </ng-template>
    </draggable-list>

知道我错过了什么吗？