Angular自定义拖拽指令移动端touchstart与touchend目标相同问题求助

核心问题 #

你的代码存在两个关键问题，导致移动端触摸拖拽无法正确识别目标元素：

1. touchend事件的target特性：触摸事件里，touchend的target永远是touchstart触发时的起始元素，不会随触摸移动的位置改变，所以靠它拿不到拖拽落点的目标元素。
2. 拖拽状态存储错误：你把draggedIndex存在起始元素的dataset里，但拖拽到其他元素时，目标元素并没有这个属性，后续读取会出错。

修正后的代码 #

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[appDragAndDrop]',
  standalone: true,
})
export class DragAndDropDirective {
  @Output() itemDrop = new EventEmitter<{ draggedIndex: number, targetIndex: number }>();

  // 把拖拽起始索引存在指令内部，不用元素dataset
  private draggedIndex: number | null = null;

  @HostListener('touchstart', ['$event'])
  onTouchStart(event: TouchEvent) {
    const touch = event.touches[0];
    const target = touch.target as HTMLElement;
    const dataIndex = target.getAttribute('data-index');

    if (dataIndex) {
      this.draggedIndex = +dataIndex;
    }
  }

  @HostListener('touchmove', ['$event'])
  onTouchMove(event: TouchEvent) {
    event.preventDefault();
    // 可选：这里可以加拖拽时的视觉反馈，比如让元素跟着手指移动
  }

  @HostListener('touchend', ['$event'])
  onTouchEnd(event: TouchEvent) {
    if (!this.draggedIndex) return;

    // 获取触摸结束时的坐标，用这个坐标找对应的元素
    const touch = event.changedTouches[0];
    const targetElement = document.elementFromPoint(touch.clientX, touch.clientY) as HTMLElement;
    
    if (!targetElement) return;

    const targetIndexStr = targetElement.getAttribute('data-index');
    const targetIndex = targetIndexStr ? +targetIndexStr : null;

    if (targetIndex !== null && !Number.isNaN(targetIndex)) {
      this.itemDrop.emit({ draggedIndex: this.draggedIndex, targetIndex });
    }

    // 重置拖拽状态，避免影响下一次操作
    this.draggedIndex = null;
  }
}

关键修改说明 #

• 状态存到指令内部：不再依赖元素的dataset，用指令私有属性保存起始索引，避免跨元素时状态丢失。
• 用坐标获取落点元素：通过document.elementFromPoint结合触摸结束的坐标，直接拿到页面上对应位置的元素，这是获取触摸落点目标的正确方法。
• 重置状态：每次拖拽结束后清空draggedIndex，防止下一次拖拽时的旧状态干扰。

额外优化建议 #

• 加视觉反馈：比如touchstart时克隆拖拽元素，让它跟着手指移动，用户体验更好。
• 边界判断：避免拖拽到列表外触发无效的索引读取。
• 处理touchcancel事件：防止触摸被意外中断（比如来电）时，状态没重置。

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