js 百度手机手势监控

百度 手机 js touch 手势 拖拽 思路

详细文档：http://cloudajs.org/docs/step4_API_Documentation#h2_7

百度touch.js手机监听事件分类：

缩放、 旋转、 滑动、 拖动开始 、拖动 、拖动结束、 长按、 敲击。

其中类中还详细分不同的触发事件。

//第一次拖拽

var dx, dy;
touch.on('#target', 'drag', function(ev){
  dx = dx||0; //第一次拖拽dx是没有值的所以dx=0,等第一次拖拽完了之后在拖拽第二次dx的值就记录了 dragend 中的dx的值
  dy = dy|| 0;
  console.log('开始拖拽记录上次位置：'+dx+'---'+dy);

this.style.webkitTransform = "translate3d(" + (dx+ev.x)+'px' + "," + (dy+ev.y)+'px' + ",0)"; //第一次拖拽X轴的值是0+ev.x

});

touch.on('#target', 'dragend', function(ev){ //第一次停止拖拽时候dx是0的
  dx = dx+ev.x; //第一次拖拽停止dx的值是0的 也就是0+第一次当前拖拽的值
  dy = dy+ev.y;
  console.log('结束记录位置：'+dx+'---'+dy);
  //log("当前x值为:" + dx + ", 当前y值为:" + dy +".");
});



//第二次开始拖拽

// dx = dx||0; 第二次开始拖拽dx有值了就是第一次开始拖拽保留的临时值0+ev.x的值

// this.style.webkitTransform = "translate3d(" + (dx+ev.x)+'px' + "," + (dy+ev.y)+'px' + ",0)";
// 第二次拖拽当然是在第一停止的位置开始拖拽了所以是 第一拖拽停止所在位置的值+当前正在拖拽的值

// dx = dx+ev.x; //第二次结束要保留第二所停留的位置 第一次停止位置+当前拖拽的值

// 这里的难点就是 临时变量的定义的技巧 dx = dx||0 ;

支持的手势事件类型：

案例：http://touch.code.baidu.com/examples.html

本站实例：https://sdeno.com/zp/baidutouch/

结合百度插件案例：《基于百度手势插件实现手机幻灯片效果》