JS实现PC与移动端兼容的Div拖动效果

兼容PC与移动端的拖动原理

此前曾编写过一个基础的Div拖动功能，近期项目恰好需要类似需求，便直接应用。然而在实际测试中发现，PC端常用的mousedown、mousemove和mouseup三个事件在移动端无法生效。这是因为移动设备没有传统鼠标，对应的交互事件分别为touchstart、touchmove和touchend。此外，坐标获取方式也有所不同：PC端通过event.clientX和event.clientY获取鼠标位置，而移动端需通过event.touches[0].clientX和event.touches[0].clientY获取触摸点坐标。

接下来具体说明实现步骤，首先展示最终效果：

PC端表现

移动端表现

以PC端为例，拖动流程主要包含三个阶段：鼠标按下（触发mousedown）、鼠标移动（触发mousemove）以及鼠标释放（触发mouseup）。实现时需定义一个变量标记鼠标是否处于按下状态。按下时，记录当前鼠标坐标及Div相对于父元素的初始偏移量。移动过程中，实时计算鼠标当前位置与按下时位置的差值，结合初始偏移量得出Div当前的新位置。释放鼠标后，将标记重置为未按下状态。

具体代码实现如下：

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 = div2.offsetLeft;  //记录div当时的左偏移量
  dy = div2.offsetTop;   //记录div的上偏移量
}
//鼠标移动时的函数
function move(){
  if(flag){            //如果是鼠标按下则继续执行
    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
    x = dx+nx;          //div在x轴的偏移量加上鼠标在x轴移动的距离
    y = dy+ny;          //div在y轴的偏移量加上鼠标在y轴移动的距离
    div2.style.left = x+"px";
    div2.style.top = y +"px";
  }
}
//鼠标释放时候的函数
function end(){
  flag = false;          //鼠标释放
}

将上述事件绑定到目标Div即可。针对移动端，只需替换为touchstart、touchmove和touchend事件。坐标获取方面，移动端使用event.touches[0].clientX和event.touches[0].clientY。实现逻辑较为简单，通过判断设备类型决定使用event还是event.touches对象：

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

需注意，在移动端拖动Div时，浏览器默认会触发页面滚动。因此，在touchmove事件中必须调用阻止默认事件的函数，以禁止页面滑动干扰拖动操作。

以下是完整代码示例，可在Chrome浏览器的开发者工具中模拟移动端环境进行测试，点击这里查看在线演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>适配移动端的拖动效果</title>
  <style>
    #div1{
      height: 1000px;
    }
    #div2{
      position: absolute;
      top:0;
      left:0;
      width: 100px;
      height: 100px;
      background: #bbbbbb;
    }
  </style>
</head>
<body>
<div id="div1">
  <div id="div2"></div>
</div>
<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 = div2.offsetLeft;
    dy = div2.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;
      div2.style.left = x+"px";
      div2.style.top = y +"px";
      //阻止页面的滑动默认事件
      document.addEventListener("touchmove",function(){
        event.preventDefault();
      },false);
    }
  }
  //鼠标释放时候的函数
  function end(){
    flag = false;
  }
  var div2 = document.getElementById("div2");
  div2.addEventListener("mousedown",function(){
    down();
  },false);
  div2.addEventListener("touchstart",function(){
    down();
  },false)
  div2.addEventListener("mousemove",function(){
    move();
  },false);
  div2.addEventListener("touchmove",function(){
    move();
  },false)
  document.body.addEventListener("mouseup",function(){
    end();
  },false);
  div2.addEventListener("touchend",function(){
    end();
  },false);
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。