移动端判断滑动方向

在移动端判断滑动方向

再我们组内看博客的时候，不小心看到了这么一个相关的标题，一看原来是个草稿，所以自己就利用该标题对其做一个简单的内容补充。(主要是自己好久没更新文章了，所以在这里小小的装一下&&》00《&&)
据自己了解，在移动端判断滑动方向，主要是根据触屏的坐标位置来计算的，在触屏开始时记录此时的坐标位置，在触屏结束时再次记录坐标位置，通过计算可以知道滑动的方向。
这里自己利用了触屏事件 touchs.
可以开始了吧，首先创建个元素，用于绑定触屏的事件

<div class="slide" id="slide">
</div>

这里给这个元素绑定两个事件触屏开始，触屏结束

function selele(obj){
    return document.getElementById(obj)
}
selele("slide").ontouchstart=function(e){//绑定触屏开始事件
    ....
}
selele("slide").ontouchend=function(e){//绑定触屏结束事件
    ....
}

在绑定完成后，就需要记录触屏开始和结束的位置

var startx=0;//记录触屏开始x轴向的位置坐标
var starty=0;//记录触屏开始y轴向的位置坐标
var endx=0;//记录触屏结束x轴向的位置坐标
var endy=0;//记录触屏结束y轴向的位置坐标
function slidestart(e){
      startx=e.touches[0].pageX;
      starty=e.touches[0].pageY;
}
function slideend(e){
      endx=e.changedTouches[0].pageX;
      endy=e.changedTouches[0].pageY;
}

记录结果之后，同时也是触屏结束时进行位置坐标的计算从而确定滑动方向

function dirresult(){
      var x=endx-startx;
      var y=endy-starty;
      alert("在x轴向滑动:"+x+" || "+"在y轴向滑动:"+y);
}

从而就确定了滑动的方向。
下面是一个完整的demo,其中还包含了移动端的拖动小案例，可供大家参考，望大家多多建议，有更好的方法》-00-《呵呵，望透漏一下。
demo地址https://github.com/lhd1324/touch-slide