Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Mobile swipe event

I have a <div> tag and when user swipes over it then it logs swipe. There are three swipes i.e. swipe, swipeleft and swiperight in jQuery Mobile but I want to use swipe only. What I want to find out is when user swipe over <div> tag then log either swipeleft or swiperight based on user's swipe direction. Is it possible? If yes then how?

$('.image').on('swipe', function (e) {
    console.log('swipe);
});
like image 540
Om3ga Avatar asked Oct 05 '22 21:10

Om3ga


1 Answers

To log a swipe left use

    $('.image').on('swipeleft', function (e) {
       console.log('swipeleft');
    }); 

for right

    $('.image').on('swiperight', function (e) {
       console.log('swiperight');
    });

place this in the function $(document).on('pageinit', function() {} of your code.

These events can be extended, this is the default for these events

$.event.special.swipe.handleSwipe :

function( start, stop ) {
    if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
        Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
        Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {

        start.origin.trigger( "swipe" )
            .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
    }
}
like image 198
Clinton Ward Avatar answered Oct 10 '22 02:10

Clinton Ward