利用js实现div拖动效果实例（兼容PC端和移动端）

前段时间写了一个简单的p拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY。

下面就来说说怎么实现这个效果吧，先看一下效果：

PC端

var flag = false;    //是否按下鼠标的标记var cur = {       //记录鼠标按下时的坐标  x:0,  y:0}var nx,ny,dx,dy,x,y ;//鼠标按下时的函数function down(){  flag = true;       //确认鼠标按下  cur.x = event.clientX;  //记录当前鼠标的x坐标  cur.y = event.clientY;  //记录当前鼠标的y坐标  dx = p2.offsetLeft;  //记录p当时的左偏移量  dy = p2.offsetTop;   //记录p的上偏移量}//鼠标移动时的函数function move(){  if(flag){            //如果是鼠标按下则继续执行    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据    x = dx+nx;          //p在x轴的偏移量加上鼠标在x轴移动的距离    y = dy+ny;          //p在y轴的偏移量加上鼠标在y轴移动的距离    p2.style.left = x+"px";    p2.style.top = y +"px";  }}//鼠标释放时候的函数function end(){  flag = false;          //鼠标释放}

然后在将事件加入到这个p中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的touchatart、touchmove、touchend就可以了，还有一个不同的时移动端获取坐标是event.touches[0].clientX和event.touches[0].clientY，这也很简单，只要加上判断就可以了，如果是PC端就使用event，如果是移动端就使用event.touches：

var touch ;if(event.touches){  touch = event.touches[0];}else {  touch = event;}

还有一点要注意，在移动端拖动p的时候移动端的页面会自动产生滑动效果，所以还需要在touchmove的是给页面添加一个阻止默认事件的函数。

下面是整个代码，可以在Chrome下模拟移动端测试，点击这里查看：

      
  
《script》  var flag = false;  var cur = {    x:0,    y:0  }  var nx,ny,dx,dy,x,y ;  function down(){    flag = true;    var touch ;    if(event.touches){      touch = event.touches[0];    }else {      touch = event;    }    cur.x = touch.clientX;    cur.y = touch.clientY;    dx = p2.offsetLeft;    dy = p2.offsetTop;  }  function move(){    if(flag){      var touch ;      if(event.touches){        touch = event.touches[0];      }else {        touch = event;      }      nx = touch.clientX - cur.x;      ny = touch.clientY - cur.y;      x = dx+nx;      y = dy+ny;      p2.style.left = x+"px";      p2.style.top = y +"px";      //阻止页面的滑动默认事件      document.addEventListener("touchmove",function(){        event.preventDefault();      },false);    }  }  //鼠标释放时候的函数  function end(){    flag = false;  }  var p2 = document.getElementById("p2");  p2.addEventListener("mousedown",function(){    down();  },false);  p2.addEventListener("touchstart",function(){    down();  },false)  p2.addEventListener("mousemove",function(){    move();  },false);  p2.addEventListener("touchmove",function(){    move();  },false)  document.body.addEventListener("mouseup",function(){    end();  },false);  p2.addEventListener("touchend",function(){    end();  },false);《script》

以上就是利用js实现div拖动效果实例 （兼容PC端和移动端）的详细内容，更多请关注 第一PHP社区 其它相关文章！