CODEWITHSUNDEEP
javascriptjqueryjquery-mobileswipe
Slevin
Slevin

Reputation: 4222

How to get direction and distance with jQuery Mobiles swipe event

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.

Upvotes: 6

Views: 6594

Answers (3)

Gajotres
Gajotres

Reputation: 57309

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){}
}

Upvotes: 8

Raji
Raji

Reputation: 845

There is another plugin available to handle all touch events. Please check out

http://quojs.tapquo.com/

https://github.com/soyjavi/quojs

Upvotes: 1

Dennis Erfeling
Dennis Erfeling

Reputation: 63

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.

Upvotes: 1

Related Questions