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

Question

[Даниил]

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

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

Answer 1

[Даниил]

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

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

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

Comments

[Flyheck]

Да, но важно не забывать, что для правильной работы требуется свап свойств, которые скрывают перетаскиваемый элемент от elementFromPoint, аналогичный тому, что я указал в своем предложении решения.

Answer 2

[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() используется для обхода этой проблемы.

Comments

[Даниил]

ChatGPT молодец конечно, но он немного просчитался, достаточно в моём коде доставить строку

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

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

[Flyheck]

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