iPhone/Android swipe detection for mobile browser

Question

Is it possible to detect that the viewport is being dragged by a touch event?

Using the following code I am able to get the position of where the finger touched the screen, what node started the event and where it was dragged to. Which solves one of the problems but I would really like to detect when the user has dragged the page/window/viewport down.

To attempt to be more clear as to what I am trying to do: I would like simulate the refresh activity in Tweetie 2/Twitter for iPhone but in HTML5 and JavaScript.

<script> 
window.ontouchmove = function(e){
  if(e.touches.length == 1){ // Only deal with one finger
    var touch = e.touches[0]; // Get the information for finger #1
    var node = touch.target; // Find the node the drag started from
    $("p:last").html(
        "clienty: " + touch.clientY + "<br/>" +
        "screenY: " + touch.screenY + "<br/>" +
        "pageY: "   + touch.pageY
        );
  }
}
</script> 

Answer 1

In the touchmove event, the event.targetTouches[0].pageX and .pageY properties will give you a running indication of the touch coordinates. You'll need to store the original touch location in touchstart, update the current location in touchmove, and then in touchend, you determine whether the touch has been up, down, left, right by calculating the differences on the x and y axes between the starting and ending locations. The length of the touches array will let you know whether it's a one-finger swipe or a two-finger pinch.

Answer 2

You might want to check out Sencha Touch . It's a mobile framework that supports those events, so you don't have to roll your own support.