Как корректно добиться эффекта pointer-events: none на сенсорном устройстве?



@TheCrossCarrier

Использую pointer события для реализации drag’n’drop. При дропе элемента, событие должно проходить «сквозь» перетаскиваемый элемент, чтобы понять, был ли дроп на дропзону. При использовании мыши всё работает корректно, но при переключении на тач устройство, pointer-events: none не работает.

Я набросал демонстрационный пример, чтобы рассмотреть проблему было удобнее:
codepen.io


Решения вопроса 1



@TheCrossCarrier Автор вопроса

Достаточно в моём коде доставить строку

const eventTarget = document.elementFromPoint(event.clientX, event.clientY)

в событии pointerup чтобы получить элемент над которым отпустили драг.


Ответы на вопрос 1



@Flyheck

В некоторых ситуациях свойство pointer-events: none может не работать на мобильных устройствах. Чтобы обойти это ограничение, вы можете использовать следующий подход:
Удалите свойство pointer-events: none из объекта draggedElementStyles.
Вместо этого добавьте следующую функцию, чтобы определить элемент, который находится под указателем:

function elementFromPointWithExclusion(x, y) {
  // Сначала скрываем draggedElement
  draggedElement.style.display = 'none';
  // Затем получаем элемент, который находится под указателем
  const element = document.elementFromPoint(x, y);
  // Возвращаем draggedElement обратно на место
  draggedElement.style.display = '';
  return element;
}

Замените строки console.log(event.target) и logEventTarget.innerText = event.target.outerHTML;
на следующий код:

const targetElement = elementFromPointWithExclusion(event.clientX, event.clientY);
console.log(targetElement);
logEventTarget.innerText = targetElement.outerHTML;

Теперь вместо использования event.target, вы будете использовать элемент, найденный с помощью функции elementFromPointWithExclusion. Это позволит вам определить элемент, который находится под перетаскиваемым элементом, даже на мобильных устройствах.

Хотя это и может показаться костылем, на самом деле это общепринятый подход для решения данной проблемы.
К сожалению, существует ограничение в поведении событий touch на мобильных устройствах, из-за которого они не пропускаются через элементы с pointer-events: none. Это означает, что нет прямого способа для получения элемента под перетаскиваемым объектом с использованием только touch событий. Вместо этого, document.elementFromPoint() используется для обхода этой проблемы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *