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