Angular图片拖拽排序异常：无法在图片上方完成拖拽交换

问题出在拖拽事件的绑定范围和目标元素的判断逻辑上，以下是修复方案：

1. 修改模板，为每个图片容器绑定拖拽事件 #

给每个.photo div添加dragover和drop事件，确保拖拽到图片区域时能触发事件：

<div class="container">
  <div class="row">
    <div class="col-12">
      <input type="file" multiple (change)="onSelectFile($event)" />
    </div>
    <div class="col-12">
      <div
        class="photos-container"
        (dragover)="onDragOver($event)"
        (drop)="onDrop($event)"
      >
        <div
          *ngFor="let image of images; index as i"
          class="photo"
          [draggable]="true"
          (dragstart)="onDragStart(i, $event)"
          (dragover)="onDragOver($event)"
          (drop)="onDrop($event)"
          style="background-color: black; margin: 10px;"
        >
          <img [src]="image" style="width: 200px; height: 200px;" />
        </div>
      </div>
    </div>
  </div>
</div>

2. 修正onDrop方法的目标元素判断逻辑 #

原来的代码无法正确识别拖拽到图片（img元素）时的目标容器，需要先找到对应的.photo父元素，再计算索引：

onSelectFile(event: any) {
  if (event.target.files.length > 0) {
    const files = Array.from(event.target.files);
    files.forEach((file: any) => {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.images.push(e.target.result);
      };
      reader.readAsDataURL(file);
    });
  }
}

onDragStart(index: any, event: any) {
  event.dataTransfer.setData("index", index);
}

onDragOver(event: any) {
  event.preventDefault();
}

onDrop(event: any) {
  event.preventDefault();
  const sourceIndex = event.dataTransfer.getData("index");
  // 定位到实际的.photo容器：如果点击的是img，取其父元素
  let targetElement = event.target;
  if (targetElement.tagName === 'IMG') {
    targetElement = targetElement.parentElement;
  }
  // 获取目标容器在父元素中的索引
  const container = document.querySelector('.photos-container');
  if (!container) return;
  const children = Array.from(container.children);
  const targetIndex = children.indexOf(targetElement);

  if (targetIndex >= 0 && sourceIndex != targetIndex) {
    const [movedImage] = this.images.splice(sourceIndex, 1);
    this.images.splice(targetIndex, 0, movedImage);
  }
}

修复原理 #

• 原代码仅在父容器绑定了drop事件，拖拽到图片或图片容器上时，event.target可能是img或.photo，导致用父容器的children数组查找时返回-1，无法执行交换。
• 给每个.photo绑定拖拽事件后，拖拽到图片区域时能正确触发drop，同时通过判断元素类型，找到对应的.photo容器，计算正确的索引后完成数组元素交换，实现图片位置互换。

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