javascript - 使用 Javascript 滑动手势 : Live translate swipe position to position of element?

Question

我正在使用 Zepto.js用于移动 Web 应用程序。 Zepto 带有方便的方法，如 swipe、swipeLeft 和 swipeRight。

例如:swipeLeft 手势在向左滑动完成 时触发。至少我是这么看的。

是否可以通过滑动手势使用实时值更新元素的位置。

因此，当在我的文档上向左缓慢滑动时，我希望 div.layer 与我一起缓慢移动。到达临界点时，层 应捕捉到预定义的位置。

这有可能吗？如果 Zepto 无法实现，我会选择其他框架。

---

我现在拥有的

HTML

<div class="page-wrap">

    <section class="layer" id="one">

    </section>

    <section class="layer" id="two">

    </section>

</div>

CSS

.page-wrap {
    position:relative;
    width:100%;
    height:100%;
}

.page-wrap .layer {
    width:100%;
    height:100%;    
    position:absolute;
    top:0;
}   

.page-wrap #one {
    background:red;
}

.page-wrap #two {
    left:-100%;
    background:green;
}

JS

$(document).ready(function() {  
    $('#two').swipeRight(function(e) {
        showInfos(true);
    });

    $('#one').swipeLeft(function(e) {
        showInfos(false);
    });
});

function showInfos(show) {
    $("#two").animate({
        left: show?'0':'-100%'
    }, 200, 'ease-out');
}

这行得通! .layer#two 位于可见视口(viewport)之外。 在 .layer#one 上向右滑动时，.layer#two 从左侧滑入。 在 .layer#two 上向左滑动时，.layer#two 会向左滑回。

这正是我希望我的应用程序执行的操作。该模式众所周知，许多应用程序都使用这种 UI 模式。

然而，我想要它做的是，当手指沿着 .layer 滑动 .layer 时，它的行为就像手机上的 native 应用程序一样s 更新它们相对于用户手指的位置。所以我不希望动画在 swipe 手势完成后生效。我希望 .layer#two 的 position 在滑动时实时更新。

也许您想在某个地方对其进行实时测试。我在 jsfiddle 上提供了上面的片段.

我真的很感激能提供一些帮助。或者提示和技巧。我想我可能不是唯一对这样的事情感兴趣的人。

Answer 1

考虑使用您自己的触摸事件处理程序:http://www.html5rocks.com/en/mobile/touch/

从该页面拖动 div 的示例:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

如果您将其更新为仅更改 x 坐标，您应该差不多完成了。