Я пытаюсь заставить drag & drop работать с мобильным телефоном.Используя события касания html5, мне удалось заставить объект изменить свою позицию, используя событие touchmove.Проблема в том, что я не могу использовать абсолютное позиционирование, поскольку объект находится внутри относительного объекта, который создается в произвольной позиции.Его исходная точка (0,0) находится внутри этого родительского объекта, который я не могу контролировать, где он будет создан.
Вместо этого я использовал фиксированное положение.Это работало нормально, так как использование touchmove event.targetTouches [0] .pageX / Y обеспечивает правильную координату, необходимую для визуализации объекта в правильной фиксированной позиции.
Но проблема была в том,когда страница прокручивается, координаты теперь немного выключены.Чем дальше страница прокручивается, тем больше смещено перетаскиваемого объекта.Прокрутка вверх вернет к координатам снова.
<div style="position:relative">
<div ontouchmove="touchmove(event)" style="position:fixed">test</div>
</div>
<script>
function touchmove(ev){
var touchLocation = ev.targetTouches[0];
ev.target.style.left = touchLocation.pageX + 'px';
ev.target.style.top = touchLocation.pageY + 'px';
}
</script>
Кстати, я не использую canvas.Любые советы, как это сделать с vanilla js или css?