页面滚动时具有固定位置冲突的HTML5 touchmove坐标

Question

我正在尝试拖放以使用移动设备。通过使用html5 touch事件，我设法通过touchmove事件使对象更改了位置。问题是，由于对象位于随机位置上创建的相对对象内部，因此无法使用绝对定位。它的原点（0,0）在此父对象内部，我无法控制将在哪里创建它。

我尝试过的是使用固定位置。由于使用touchmove event.targetTouches [0] .pageX / Y提供了正确的坐标，我需要将对象渲染到正确的 fixed 位置。

但是问题是，当页面滚动时，坐标现在稍微偏离了。页面滚动得越远，被拖动的对象就越位移。滚动到顶部将再次与坐标重新对齐。

<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>

顺便说一句，我不使用画布。有任何技巧如何使用香草js或CSS？