H5 touchstart、touchmove、touchend 拖拽

1.获取鼠标位置

*clientX/clientY  相对浏览器窗口坐标（不会随着滚动条而变化，不包含工具栏、导航栏）

event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。

*pageX/pageY page为页面的意思，页面的高度一般情况client游览器显示区域装不下，所以会出现垂直滚动条。

鼠标距离页面初始page原点的长度。

在IE中没有pageX、pageY取而代之的是event.x、evnet.y。

*offsetX/offsetY 目标事件距左上角（参考原点）长度 Chrome下，offsetX offsetY是包含边框的 ，而IE、FF是不包含边框的，如果鼠标进入到border区域，为返回负值。

2.实例代码

let oBox = document.getElementById("test");


oBox.addEventListener("touchstart",function(ev){
  let startX=ev.targetTouches[0].clientX;
  let startY=ev.targetTouches[0].clientY;
  let disX=startX-oBox.offsetLeft;
  let disY=startY-oBox.offsetTop;
  let dir="";//拖拽方向 x代表横向拖拽 y代表纵向
  function fnMove(ev){
    let curX=ev.targetTouches[0].clientX;
    let curY=ev.targetTouches[0].clientY;
    if(dir==''){
      if(Math.abs(curX-startX)>=5){
        dir='x';
      }else if(Math.abs(curY-startY)>=5){
        dir='y';
      }
    }else{
      if (dir=='x') {
        oBox.style.left=ev.targetTouches[0].clientX-disX+'px';
      }else if(dir=='y'){
        oBox.style.top=ev.targetTouches[0].clientY-disY+'px';
      }
    }
  }

  function fnEnd(){
    oBox.removeEventListener('touchmove',fnMove,false);
    oBox.removeEventListener('touchend',fnEnd,false);
  }
  oBox.addEventListener('touchmove',fnMove,false);
  oBox.addEventListener('touchend',fnEnd,false);
},false);