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


Posted in Javascript onDecember 09, 2016

前段时间写了一个简单的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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 #Javascript
Bootstrap table使用方法详细介绍
Dec 09 #Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 #Javascript
任意Json转成无序列表的方法示例
Dec 09 #Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
You might like
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python 类的特殊成员解析
2018/06/20 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
终端业务员岗位职责
2013/11/27 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
网络优化专员求职信
2014/05/04 职场文书
师德师风建设方案
2014/05/08 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记