Swipe Gesture with Javascript: Live translate swipe position to position of element?

Question

I'm using Zepto.js for a mobile Webapplication. Zepto comes with handy methods like swipe, swipeLeft and swipeRight.

For instance: the swipeLeft gesture is triggered once a swipe to the left is finished. At least that is how I see it.

Is it possible to update the position of an element with live values from this swipe gesture.

So when swiping slowly to the left on my document I want div.layer to move slowly along with me. When reaching a critical point the layer should snap to a predefined position.

Is that possible somehow. I would choose a different framework if it's not possible with Zepto.

---

What I have right now

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');
}

This works! The .layer#two is positioned outside the visible viewport. When swiping to the right on .layer#one the .layer#two is sliding in from the left. When swiping to the left on .layer#two the .layer#two is sliding back out to the left.

This is exactly what I want my application to do. The pattern is well known and a lot of apps do use this UI pattern.

However what I want it to do is behave as if it where a native application on a mobile phone where when sliding the finger along the .layers the .layers update their position relative to the finger of the user. So I don't want the animation to take effect once the swipe gesture has been done. I want the position of .layer#two to live update while swiping.

Maybe you want to live test it somewhere. I provided the snippets above on jsfiddle.

I would really appreciate some help with this. Or tips and tricks. I guess I might not be the only one interested in something like this.

Answer 1

Consider using your own touch event handlers: http://www.html5rocks.com/en/mobile/touch/

Example for dragging a div around, from that page:

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);

If you update that to just change the x coordinate, you should be nearly done.