CODEWITHSUNDEEP
javascriptjquerytouchdragswipe
CaribouCode
CaribouCode

Reputation: 14418

Touch swipe coordinates using quo.js

I'm building a web app using quo.js to handle touch events.

When the user swipes (drags) with one finger, I can use the following quo.js code to recognise this and apply a css transformation:

$$('element').swipe(function() {
  $('element').vendor('transform','translate(-100px,-100px)');
});

Now what I want to do is apply the translate amount based on the amount of swipe. In other words, I need to get the X/Y coordinates of the swipe. Does anyone know if this is possible using quo.js or do I need to use a different js library?

I tried this to get coordinates but it returns 'undefined':

$$('element').swipe(function(e) {
  alert(e.pageX);
});

Upvotes: 0

Views: 3194

Answers (1)

marionebl
marionebl

Reputation: 3392

The event object quo.js passes to the callback contains a currentTouch object holding the x and y coordinates: http://jsfiddle.net/marionebl/UupmU/1/

$$('selector').swipe(function(e){
  console.log('swipe');
  console.log(e.currentTouch); // Gives position when gesture is cancelled 
});

Note that the swipe event only fires when a swipe gesture is completed. As far as I understood your use case it would be more convenient to use the swiping event, which fires as soon as a swipe gesture is detected and during all movements until release: 

var $swipeable = $$('.swipeable'),
    swipeableHeight = $swipeable.height(),
    swipeableWidth = $swipeable.width();

$swipeable.swiping(function(e){
   var x = e.currentTouch.x - swipeableWidth / 2;
   var y = e.currentTouch.y - swipeableHeight / 2;

   $swipeable
     .vendor('transform', 'translate(' + x +'px,'+ y +'px)');
});

Upvotes: 3

Related Questions