Angular组件中Drop与Dragend事件未触发问题求助

问题背景 #

开发了一个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>

TypeScript逻辑

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 [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>

核心问题原因 #

1. DOM重排导致事件绑定丢失
   在onDragOver中直接修改listItems数组，触发Angular变更检测，*ngFor会销毁原有DOM元素并重建新的列表行。新生成的元素虽然模板上有事件绑定，但拖拽过程中原元素已被移除，新元素的drop/dragend事件无法被触发。

2. drop事件缺少必要的默认行为阻止
   部分浏览器要求在drop事件处理函数中调用event.preventDefault()，否则不会正确触发该事件。

3. dataTransfer数据类型错误
   setData仅支持字符串类型，直接传入对象会被转为[object Object]，虽然不直接导致事件不触发，但会引发后续数据处理异常。

修复方案 #

1. 分离临时排序与原数组更新 #

不在拖拽过程中修改原数组，改用临时变量存储预期排序结果，待drop事件触发后再更新原数组，避免频繁DOM重排：

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;
  // 新增临时数组存储拖拽中的排序结果
  tempList: any[] = [];

  constructor() { }
  
  ngOnInit(): void { }  

  onDragStart(event: DragEvent, index: number): void 
  {
    this.draggedItemIndex = index;
    this.previousList = JSON.parse(JSON.stringify(this.listItems));
    this.tempList = [...this.previousList];
    // 修正数据存储，转为JSON字符串
    if(event.dataTransfer)
      event.dataTransfer.setData('text/plain', JSON.stringify(this.listItems[index]));
  }

  onDragOver(event: DragEvent, index: number): void 
  {
    event.preventDefault();
    this.dragOverIndex = index;
    // 仅修改临时数组，不触发DOM重排
    this.tempList = [...this.previousList];
    const draggedItem = this.tempList[this.draggedItemIndex];
    this.tempList.splice(this.draggedItemIndex, 1);
    this.tempList.splice(index, 0, draggedItem);
  }

  // 新增drop事件处理，更新原数组并重置状态
  onDrop(event: DragEvent): void {
    event.preventDefault();
    this.listItems = [...this.tempList];
    this.resetDrag();
  }

  resetDrag()
  {
    this.previousList = [];
    this.dragOverIndex = -1;
    this.draggedItemIndex = -1;
    this.tempList = [];
  }
}

2. 修正HTML事件绑定 #

确保drop事件绑定到新的处理函数，同时保留dragend的重置逻辑：

<ng-container *ngFor="let item of listItems; let i = index">
  <div
    draggable="true"
    (dragstart)="onDragStart($event, i)"
    (dragover)="onDragOver($event, i)"
    (drop)="onDrop($event)"
    (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>

3. 优化视觉反馈（可选） #

如果需要保留占位效果，建议基于dragOverIndex和draggedItemIndex调整样式，避免隐藏行导致DOM结构变化，比如：

.drag-over {
  border: 2px dashed #ccc;
  background-color: #f5f5f5;
}
.dragged-item {
  opacity: 0.5;
}

在HTML中添加对应的类绑定：

<div
  draggable="true"
  [ngClass]="{'dragged-item': i === draggedItemIndex, 'drag-over': i === dragOverIndex}"
  (dragstart)="onDragStart($event, i)"
  (dragover)="onDragOver($event, i)"
  (drop)="onDrop($event)"
  (dragend)="resetDrag()">
  ...
</div>

内容的提问来源于stack exchange，提问作者ArcaneLight