纯javascript拖拽在iPad上不流畅

我正在尝试仅使用纯javascript在其父级（

#container

）中拖动一个div（

#drag

）
（只需在iPad上工作）。

我写了一个脚本，当我在Chrome浏览器中打开“模拟触摸事件”时，它工作得很好，
但是在真正的iPad上，只要我开始稍微快一点，div就会停止跟随。

我认为当我移动太快时，我的手指可能会脱离元素，因此我在主体上设置了

addEventListner

，而不是div，但仍然是一样的。

有人知道为什么吗？如何让它在iPad上顺利运行

演示：

Javascript

var dom = {
    container: document.getElementById("container"),
    drag: document.getElementById("drag"),
}
var container = {
    x: dom.container.getBoundingClientRect().left,
    y: dom.container.getBoundingClientRect().top,
    w: dom.container.getBoundingClientRect().width,
    h: dom.container.getBoundingClientRect().height
}
var drag = {
    w: dom.drag.offsetWidth,
    h: dom.drag.offsetHeight
}

target = null;

document.body.addEventListener('touchstart', handleTouchStart, false);
document.body.addEventListener('touchmove', handleTouchMove, false);
document.body.addEventListener('touchend', handleTouchEnd, false);

function handleTouchStart(e) {
    if (e.touches.length == 1) {
        var touch = e.touches[0];
        target = touch.target;
    }
}
function handleTouchMove(e) {
    if (e.touches.length == 1) {
        if(target ===  dom.drag) {
            moveDrag(e);
        }
    }
}
function handleTouchEnd(e) {
    if (e.touches.length == 0) { // User just took last finger off screen
        target = null;
    }
}

function moveDrag(e) {
    var touch = e.touches[0];
    var posX = touch.pageX - container.x - drag.w / 2;
    var minX = 0;
    var maxX = container.w - drag.w;
    if(posX < minX) {posX = minX;} 
    else if(posX > maxX) {posX = maxX;}
    var posY = touch.pageY - container.y - drag.h / 2;
    var minY = 0;
    var maxY = container.h - drag.h;
    if(posY < minY) {posY = minY;} 
    else if(posY > maxY) {posY = maxY;}
    dom.drag.style.left = posX + "px";
    dom.drag.style.top = posY + "px";
}

var-dom={
容器：document.getElementById（“容器”），
拖动：document.getElementById（“拖动”），
}
变量容器={
x:dom.container.getBoundingClientRect（）.left，
y:dom.container.getBoundingClientRect（）.top，
w:dom.container.getBoundingClientRect（）.width，
h:dom.container.getBoundingClientRect（）.height
}
变量拖动={
w:dom.drag.offsetWidth，
h:dom.drag.offsetHeight
}
target=null；
document.body.addEventListener（'touchstart'，HandletTouchStart，false）；
document.body.addEventListener（'touchmove'，handleTouchMove，false）；
文件.正文.附录列表（'touchend'，handleTouchEnd，false）；
功能handleTouchStart（e）{
如果（e.e.length==1）{
var-touch=e.touch[0]；
target=touch.target；
}
}
功能手柄触摸屏（e）{
如果（e.e.length==1）{
如果（目标===dom.drag）{
移动阻力（e）；
}
}
}
函数handleTouchEnd（e）{
如果（e.touchs.length==0）{//用户刚刚将最后一根手指从屏幕上取下
target=null；
}
}
函数moveDrag（e）{
var-touch=e.touch[0]；
var posX=touch.pageX-container.x-drag.w/2；
var-minX=0；
var maxX=container.w-drag.w；
如果（posXmaxX）{posX=maxX；}
var posY=touch.pageY-container.y-drag.h/2；
var-minY=0；
var maxY=container.h-drag.h；
如果（posYmaxY）{posY=maxY；}
dom.drag.style.left=posX+“px”；
dom.drag.style.top=posY+“px”；
}
 > p>您可能会考虑将许多使用在MOVDRAG/<代码>中的变量移到静态内存池中（参见：），因为该函数将被频繁调用。另外，使用
style.left
和
style.top
更改偏移量需要在每次手指移动时进行回流-我建议在移动过程中尝试使用渲染变换，然后仅在
handleTouchEnd