8

I hope you are well today, I am trying to calculate the swipe distance (a touch gesture) on a mobile website, how would you work out how many pixels the user has swiped across the screen?

$('.cmButtons').live('swipeleft',function(){
    console.log("swiped left");
});
Sébastien
  • 11,860
  • 11
  • 58
  • 78
Xavier
  • 8,244
  • 18
  • 54
  • 85
  • 1
    I only know how to do this not using jQuery, so this isn't an answer but perhaps a clue. The starting x, y coordinates of the swipe are established in touchStart event. There, too, you assign the startPos to endPos, the default ending position. In the touchMove listener you keep noting the current coordinates, making these the endPos coordinates. In touchEnd you note the difference between startPos and endPos. So, either jQuery is exposing the startPos and endPos coordinates in its swipeLeft event, or you have to wire up your own plug-in to accomplish this outside of jQuery. – Tim Aug 03 '11 at 12:28
  • could you add some sample code please Tim? and i understand that it might be slightly different but i would like to use your code as a basis to start :) – Xavier Aug 03 '11 at 13:28
  • 1
    Related: http://stackoverflow.com/questions/3183872/does-jquery-preserve-touch-events-properties and http://stackoverflow.com/questions/4755505/how-to-recogized-touch-event-using-jquery-for-ipad-safari-browser-is-it-possible – Phill Pafford Aug 03 '11 at 15:27
  • 1
    Also: http://stackoverflow.com/questions/4992355/how-to-get-position-coordinates-of-a-tap-event-with-jquery-mobile – Phill Pafford Aug 03 '11 at 15:40
  • 1
    @Xavier: check the link here http://forum.jquery.com/topic/touch-actions -- look for "proof-of-concept" – Tim Aug 03 '11 at 20:19

3 Answers3

9

I would suggest the excellent jQuery TouchSwipe Plugin by Matt Bryson: http://labs.skinkers.com/touchSwipe/.

It has touch & swipe events for 4 directions and 1 or 2 fingers. And it has SwipeStatus with which you can get swipe distance: http://labs.skinkers.com/touchSwipe/demo/Swipe_status.html

willdanceforfun
  • 11,044
  • 31
  • 82
  • 122
Jasper Moelker
  • 1,390
  • 13
  • 10
2

I couldn't figure out how to get the distance on the fly from the method, so instead I just set a new global threshold on my page.

//Override the default horizontalDistanceThreshold of 30
$.event.special.swipe.horizontalDistanceThreshold = 200;

I'm using an older version of jQM (v1.0 still...) so this may have changed. It's easy to find in the source if you just start looking for swipe events.

jocull
  • 20,008
  • 22
  • 105
  • 149
2

Not sure if this helps but with Beta 2 they have released some additional swipe functionality

Configurable swipe event thresholds added

There were a number of hard-coded constants in the jquery.mobile.event.js swipe code. For developers who need to tweak those constants to allow a greater vertical displacement and still register a swipe, this new feature allows them to be adjusted. Thanks to mlitwin for contributing this.

  • scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling
  • durationThreshold (default: 1000ms) – More time than this, and it isn’t a swipe
  • horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
  • verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • in the end i had to write a custom listener in jQuery Mobile that would trigger on start tap - swipe and tap - swipe events. Thanks for your submission. It got me started in the right place. – Xavier Aug 12 '11 at 07:56
  • np. could you also share you custom listener? could help others as well – Phill Pafford Aug 12 '11 at 13:02