0

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

我编写了一个脚本，当我在打开“模拟触摸事件”的情况下在 Chrome 中使用它时运行良好，
但在真正的 iPad 上，只要我开始快速拖动 div 就会停止跟随。

我认为当我移动得太快时我的手指可能会离开元素，
所以我将 设置addEventListner在 body 上而不是 div 上，但还是一样。

有人知道为什么吗？以及如何让它在 iPad 上流畅运行？

演示：http: //jsfiddle.net/kxrEZ/

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";
}
4

1 回答 1

1

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

于 2013-08-13T22:36:22.303 回答