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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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
服务器端解压缩zip的脚本
2006/12/22 PHP
discuz安全提问算法
2007/06/06 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
javascript 写类方式之七
2009/07/05 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
岗位职责的定义
2013/11/10 职场文书
韩国商务邀请函
2014/01/14 职场文书
文艺晚会主持词
2014/03/24 职场文书
家长对孩子的评语
2014/04/18 职场文书
车辆年审委托书范本
2014/09/18 职场文书
二年级学生期末评语
2014/12/26 职场文书
求职信格式范文
2015/03/19 职场文书