javascript - 使用 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 包含一个包含 x 和 y 坐标的 currentTouch 对象: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)');
});