Drag and Drop Directive touchend and touchstart event target is the same

Question

I create a custom directive for drag and drop, i don't use drag and drop from Angular material because can drag just vertical or horizontal. The problem is for mobile touch, for touchstart and touchend the target is the same.

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

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

 
  @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) {
      target.dataset['draggedIndex'] = dataIndex;
    }
  }

  @HostListener('touchmove', ['$event'])
  onTouchMove(event: TouchEvent) {
     event.preventDefault();
  }

  @HostListener('touchend', ['$event'])
  onTouchEnd(event: TouchEvent) {
     const target = event.target as HTMLElement;

    const targetIndex = +target.getAttribute('data-index');
    const draggedIndex = +(target.dataset['draggedIndex'] || '');

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

Need help, if exist another solution or show what i did wrong.

Answer 1

you might need to implement a way to track the movement during the drag. EG:

  private lastTouchX: number = 0;
  private lastTouchY: number = 0;

  onTouchStart(event: TouchEvent) {
    //Your code
    if (dataIndex) {
      target.dataset['draggedIndex'] = dataIndex;      
      this.lastTouchX = touch.clientX;
      this.lastTouchY = touch.clientY;
    }
  }

  onTouchMove(event: TouchEvent) {
    //your code
    const touch = event.touches[0];
    this.lastTouchX = touch.clientX;
    this.lastTouchY = touch.clientY;
  }

  onTouchEnd(event: TouchEvent) {
    const target = document.elementFromPoint(this.lastTouchX, this.lastTouchY) as HTMLElement;

    const draggedIndex = +(event.target as HTMLElement).dataset['draggedIndex'] || '';
    //...

    delete (event.target as HTMLElement).dataset['draggedIndex'];
  }
}