前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：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的偏移量就是现在div距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。

下面来看一下代码：

  1. var flag = false;       //是否按下鼠标的标记
  2. var cur = {             //记录鼠标按下时的坐标
  3.     x:0,
  4.     y:0
  5. }
  6. var nx,ny,dx,dy,x,y ;
  7. //鼠标按下时的函数
  8. function down(){
  9.     flag = true;             //确认鼠标按下
  10.     cur.x = event.clientX;   //记录当前鼠标的x坐标
  11.     cur.y = event.clientY;   //记录当前鼠标的y坐标
  12.     dx = div2.offsetLeft;    //记录div当时的左偏移量
  13.     dy = div2.offsetTop;     //记录div的上偏移量
  14. }
  15. //鼠标移动时的函数
  16. function move(){
  17.     if(flag){                        //如果是鼠标按下则继续执行
  18.         nx = event.clientX - cur.x;  //记录鼠标在x轴移动的数据
  19.         ny = event.clientY - cur.y;  //记录鼠标在y轴移动的数据
  20.         x = dx+nx;                   //div在x轴的偏移量加上鼠标在x轴移动的距离
  21.         y = dy+ny;                   //div在y轴的偏移量加上鼠标在y轴移动的距离
  22.         div2.style.left = x+"px";
  23.         div2.style.top = y +"px";
  24.     }
  25. }
  26. //鼠标释放时候的函数
  27. function end(){
  28.     flag = false;                    //鼠标释放
  29. }

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

  1. var touch ;
  2. if(event.touches){
  3.     touch = event.touches[0];
  4. }else {
  5.     touch = event;
  6. }

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>适配移动端的拖动效果</title>
  6.     <style>
  7.         #div1{
  8.             height: 1000px;
  9.         }
  10.         #div2{
  11.             position: absolute;
  12.             top:0;
  13.             left:0;
  14.             width: 100px;
  15.             height: 100px;
  16.             background: #bbbbbb;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div id="div1">
  22.     <div id="div2"></div>
  23. </div>
  24. <script>
  25.     var flag = false;
  26.     var cur = {
  27.         x:0,
  28.         y:0
  29.     }
  30.     var nx,ny,dx,dy,x,y ;
  31.     function down(){
  32.         flag = true;
  33.         var touch ;
  34.         if(event.touches){
  35.             touch = event.touches[0];
  36.         }else {
  37.             touch = event;
  38.         }
  39.         cur.x = touch.clientX;
  40.         cur.y = touch.clientY;
  41.         dx = div2.offsetLeft;
  42.         dy = div2.offsetTop;
  43.     }
  44.     function move(){
  45.         if(flag){
  46.             var touch ;
  47.             if(event.touches){
  48.                 touch = event.touches[0];
  49.             }else {
  50.                 touch = event;
  51.             }
  52.             nx = touch.clientX - cur.x;
  53.             ny = touch.clientY - cur.y;
  54.             x = dx+nx;
  55.             y = dy+ny;
  56.             div2.style.left = x+"px";
  57.             div2.style.top = y +"px";
  58.             //阻止页面的滑动默认事件
  59.             document.addEventListener("touchmove",function(){
  60.                 event.preventDefault();
  61.             },false);
  62.         }
  63.     }
  64.     //鼠标释放时候的函数
  65.     function end(){
  66.         flag = false;
  67.     }
  68.     var div2 = document.getElementById("div2");
  69.     div2.addEventListener("mousedown",function(){
  70.         down();
  71.     },false);
  72.     div2.addEventListener("touchstart",function(){
  73.         down();
  74.     },false)
  75.     div2.addEventListener("mousemove",function(){
  76.         move();
  77.     },false);
  78.     div2.addEventListener("touchmove",function(){
  79.         move();
  80.     },false)
  81.     document.body.addEventListener("mouseup",function(){
  82.         end();
  83.     },false);
  84.     div2.addEventListener("touchend",function(){
  85.         end();
  86.     },false);
  87. </script>
  88. </body>
  89. </html>

如有问题请指正，谢谢！

js实现一个可以兼容PC端和移动端的div拖动效果的更多相关文章

  1. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

  2. 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  3. JS判断当前使用设备是pc端还是web端（转MirageFireFox）

    js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...

  4. PC端、移动端的页面适配及兼容处理

    转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...

  5. 一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...

  6. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  7. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  8. 一个程序员一月的开销统计分析、（附上PC端和移动端android源码）

    图片1(类别): 图片中的数据是我一月的花费统计分析. 这是该网站的地址:http://www.10086bank.com/(需要登录)  没有帐号马上注册一个吧.进入系统后点击“记一笔”  添加数据 ...

  9. 区分PC端与移动端代码，涵盖C#、JS、JQuery、webconfig

    1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...

随机推荐

  1. js 变量提升和函数提升原理

    关于js的变量,开始的时候我们都会被告知,变量声明应该在引用该变量之前.关于为什么要这样做呢,开始的时候本着会用就行的目的,也没去深究.不过后来经常会发现一些让人很费解的..姑且称为现象吧.先看一段代 ...

  2. Oracle case when的用法

    select xm,sex,(case sex when '男' then '1' when '女' then '2' end ) as xb, birthdayfrom student

  3. jQuery in action 3rd - Working with properties, attributes, and data

    properties properties 是 JavaScript 对象内在的属性,可以进行动态创建,修改等操作. attributes 指的是 DOM 元素标记出来的属性,不是实例对象的属性. 例 ...

  4. 领域模型驱动设计（Domain Driven Design）入门概述

    软件开发要干什么: 反映真实世界要自动化的业务流程 解决现实问题 领域Domain Domain特指软件关注的领域 在不能充分了解业务领域的情况下是不可能做出一个好的软件 领域建模 领域模型驱动设计 ...

  5. 如何删除选中的checkbox

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Java Environment Setting

    As a non-Java developer, I am quit stuck in Java environment setting because I am not familiar with ...

  7. 敏捷开发方法-Scrum

    为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的话来讲述Scrum中的各个环节,主要目的有两个,一个是进行知识的总结,另外一个是觉得网上很多学习资 ...

  8. 比较C++和C#的一个性能问题

    C++:只要你的代码正确,算法良好,你比较少关注性能问题,编译器会替你搞定绝大部分工作 C#:你的代码正确,算法良好,你还得用工具去分析优化性能,JIT为了快速工作,很多优化工作没有深入开展. 手工优 ...

  9. android开发学习之Level List篇

    Level List google 说明:A Drawable that manages a number of alternate Drawables, each assigned a maximu ...

  10. 'MAMapKit/MAMapKit.h' file not found

    1.应该是derived data没清导致的.在Window -> Organizer -> Projects,找到你这个项目,然后点下右边derived data后边的delete按钮. ...