使用 quo.js 触摸滑动坐标

Question

我正在使用 quo.js 构建一个 Web 应用程序来处理触摸事件。

当用户用一根手指滑动（拖动）时，我可以使用以下 quo.js 代码来识别这一点并应用 css 转换：

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

现在我想做的是根据滑动量应用翻译量。换句话说，我需要获取滑动的 X/Y 坐标。有谁知道这是否可以使用 quo.js 或者我需要使用不同的 js 库？

我试过这个来获取坐标，但它返回“未定义”：

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

Answer 1

quo.js 传递给回调的事件对象包含一个 currentTouch 对象，其中包含 x 和 y 坐标：http://jsfiddle.net/marionebl/UupmU/1/

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

请注意，滑动事件仅在滑动手势完成时触发。据我了解您的用例，使用swiping 事件会更方便，该事件会在检测到滑动手势时以及在所有动作期间触发，直到发布：

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)');
});