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