Question

我现在有一个工作的触摸屏图像滑块但唯一的问题是，当我触摸屏时，移动位置从div的中心开始并移动整个div，使指针位于中间并抬起屏幕 - 和然后尝试做另一个动作。运动位置再次在div的中心开始。

我知道当我抬起屏幕或者解开屏幕时，我需要以某种方式重置合作伙伴，但我不知道如何做到这一点。如果不是几个星期，我需要几天时间才能在没有帮助的情不要误会我的意思我只是为自己学习，但我也学到了很多东西，我可以检查自己代码的工作解决方案。

以下是div的一些HTML：

    .container{
      position:absolute;
      top:0%;
      left:0%;
      width:500px;
      height:100%;
    }

    .drag{
      position: absolute;
      top:1%; 
      left:0%;
      width:100%;
      height:15%;
      -webkit-transform: translate3d(0,0,0);
      border-style: solid; 2px;
      border-color: blue;
      z-index:1000;
    }

    </head>

    <body>

<div id="container" class="container">
  <div id='drag' class='drag'><!---video area--->

  some images

  </div>
</div>

以下是滑动事件的代码。

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 
}

target = null;

document.body.addEventListener('touchstart', handleTouchStart, false);
document.body.addEventListener('touchmove', handleTouchMove, false);
document.body.addEventListener('touchend', handleTouchEnd, false);
document.body.addEventListener('touchcancel', handleTouchCancel, 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 handleTouchCancel(e) {
    return;
}

function moveDrag(e) {
    var touch = e.touches[0];
    var posX = touch.pageX - container.x - drag.w / 2;


    dom.drag.style.left = posX + "px";

    }

我知道这行代码：

var posX = touch.pageX - container.x - drag.w / 2;

这就是好消息：

http://jsfiddle.net/xbmyazb2/20/

如何找到触摸屏滑动div的div边缘？

0 个答案: