How to get direction and distance with jQuery Mobiles swipe event

Question

Is it possible to get the direction and the distance in a callback function when using jQuery Mobiles swipe event? I've found nothing about it in the official docs.

TouchSwipe is a good alternative, but i need the tap event form jQuery Mobile and i don't want to include two libraries.

Answer 1

Working example: http://jsfiddle.net/Gajotres/K69AJ/

This example is made with jQuery Mobile events so it will only work with jQuery Mobile. Tested on Windows and Android platform.

Vmouse events are made to bridge the difference between desktop and mobile browsers.

Also notice this line:

event.preventDefault();

It is needed for Android platform, platform has a nasty bug with touch movement detection. Bug report: http://code.google.com/p/android/issues/detail?id=19827

var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;

$(document).on('vmousedown', function(event){
    gnStartX = event.pageX;
    gnStartY = event.pageY;
    event.preventDefault();
});

$(document).on('vmouseup', function(event){
    gnEndX = event.pageX;
    gnEndY = event.pageY;  
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2));

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) {
        if(gnEndX > gnStartX) {
            alert("Swipe Right - Distance " + distance + 'px');
        } else {
            alert("Swipe Left - Distance " + distance + 'px');     
        }
    } else {
        if(gnEndY > gnStartY) {
            alert("Swipe Bottom - Distance " + distance + 'px');  
        } else {
            alert("Swipe Top - Distance " + distance + 'px');      
        }        
    }  

    event.preventDefault();      
});

function nthroot(x, n) {
  try {
    var negate = n % 2 == 1 && x < 0;
    if(negate)
      x = -x;
    var possible = Math.pow(x, 1 / n);
    n = Math.pow(possible, n);
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
      return negate ? -possible : possible;
  } catch(e){}
}

Answer 2

You can also use hammer.js. There are both events - swipe and tap. In hammer.js it's possible to get the directions and distance. The tap event is also part of the newer jQuery versions - you don't need to include jquery-mobile only for tap event.

Documentation hammer.js

Hope it works for you.