使用Javascript滑動手勢：實時將滑動位置轉換為元素的位置？

Question

我正在將Zepto.js用於移動Web應用程序。 Zepto帶有方便的方法，例如swipe ， swipeLeft和swipeRight 。

例如：一旦向左滑動完成，就會觸發swipeLeft手勢。 至少我是這樣看的。

是否可以通過此滑動手勢用實時值更新元素的位置。

因此，當我在文檔上向左緩慢滑動時，我希望div.layer與我一起緩慢移動。 當達到臨界點時，該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位於可見視口之外。 在.layer#one上向右滑動時， .layer#two從左側滑入。 在.layer#two上向左滑動時， .layer#two滑回左側。

這正是我希望我的應用程序執行的操作。 該模式是眾所周知的，許多應用程序確實使用此UI模式。

但是我希望它做的是表現得好像它哪里哪里滑動手指時，沿手機上的本地應用程序.layer S中.layer相對的位置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坐標，則應該差不多完成了。