Как зарегистрировать сенсорное перемещение по событиям в Angular?

Question

Подведите итог проблемы

Stackblitz - https://stackblitz.com/edit/angular-touch-playground

Я пытаюсь зарегистрировать события касания и хочу иметь возможность прикоснуться к моему пальцу, перетащить и поднять мойпалец, в результате чего каждый td таблицы коснулся, чтобы быть выделенным.Похоже, это записывается как pan событие

. Я использовал словарь pressed, когда регистрируется любое из событий click, touch, etc и [class.bg-warning]="pressed[i]", чтобы выделить их.

Isесть ли способ зарегистрировать каждое td прикосновение?

Я пробовал такие события, как click, touchstart и hammerjs (в app.module.ts я импортировал через import 'hammerjs';), но мне нужно нажатькаждый td, чтобы выделить его.

<td *ngFor="let dummy of ' '.repeat(48).split(''), let i = index"
    (press)="logPress(i)"
    (mouseenter)="logMouseIn(i)"
    (touchmove)="logTouchmove(i)"
    (click)="logClick(i)"
    (touch)="logTouch(i)"
    (touchend)="logTouchend(i)"
    (hover)="logHover(i)"
    (touchstart)="logTouchstart(i)"
    (touchend)="logTouchend(i)"
    (touchcancel)="logTouchcancel(i)"
    [class.bg-warning]="pressed[i]" >
</td>

пример настройки pressed словарь:

logClick(i: number) {
 this.event += '\n Click: '+ i.toString();
 this.pressed[i]=1;
}

Answer 1

Stackblitz - https://stackblitz.com/edit/angular-touch-playground-pan-events

Требуется изменение - Ключ в том, что если бы я должен был сделать

(pan)="logPan(i)"

в пределах td, тогда независимо от того, будет ли событие панорамирования регистрировать тот же i, что и место начала панорамирования.

Принимая во внимание, что если я сделаю это

(pan)="logPan($event)"

Я могу получить доступ к $event координатам (x, y) через evt.center.x / evt.center.y.

Использование координат - Чтобы преобразовать координаты (x, y) в td, я забочусь о том, что я использовал elementFromPoint метод, который возвращает самый верхний элемент в указанные координаты (относительно области просмотра) , и я добавил доступный атрибут id к каждому td, чтобы я мог установить свой словарь pressed, в котором регистрируется касание td.

logPan(evt: any) {
  this.event += '\n Touch Pan: '+ `(${evt.center.x}, ${evt.center.y}, ${document.elementFromPoint(evt.center.x, evt.center.y).id})`
  this.pressed[document.elementFromPoint(evt.center.x, evt.center.y).id]=1;
}

Дополнительно - похоже, панорамирование не поднимается с того места, где впервые начинается палец, поэтому требуется дополнительная (touchstart)="logTouchstart(i)".

Кредит - Я понял это после просмотра Stackblitz в следующем блоге: https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0