Question

我正在尝试使用纯javascript 在其父级（#drag）中拖动div（#container）。
（只需要在iPad上工作）。

当我在Chrome中使用“模拟触摸事件”打开时，我编写了一个可以正常使用的脚本，但是在真正的iPad上，只要我开始拖动一点快速停止跟随。

当我移动太快时，我认为我的手指可能会脱离元素，因此我将addEventListner设置在身体而不是div上，但仍然相同。
< / p>

任何人都知道为什么？如何让它在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";
}

Answer 1

您可能会考虑将您在moveDrag中使用的许多变量移动到静态内存池中（请参阅：http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/），因为该函数会经常被调用。此外，使用style.left和style.top更改偏移量需要每次手指移动时进行重排 - 我建议在移动过程中尝试使用渲染变换，然后仅在handleTouchEnd

纯JavaScript在iPad上拖得不顺畅

1 个答案: