杰晶网络

js实现一个可以兼容PC端和移动端的div拖动效果实例
网络编程 2024/11/16 佚名
3 2

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

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

PC端

js实现一个可以兼容PC端和移动端的div拖动效果实例

移动端

js实现一个可以兼容PC端和移动端的div拖动效果实例

先来分析一个拖动的流程，以PC端为例，首先是鼠标按下（mousedown事件），然后移动（mousemove事件），最后释放鼠标（mouseup事件），首先要设置一个变量记录鼠标是否按下，在鼠标按下的时候，我们做一个标记，然后需要记录一下鼠标当前的坐标，还有这个div当前的偏移量，当鼠标开始移动的时候，记录下鼠标当前的坐标，用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时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中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的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;
}

 还有一点要注意，在移动端拖动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>

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

标签：
js实现div拖动效果,js实现div拖动,js实现鼠标拖动div
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网