前段时间写了一个简单的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距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。

下面来看一下代码：

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实现一个可以兼容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. Spring IOC 注入方式

    依赖注入通常有如下两种方式: ①设值注入:IOC容器使用属性的Setter方法来注入被依赖的实例. 设值注入是指IOC容器使用属性的Setter方法来注入被依赖的实例.这种注入方式简单.直观,因而在S ...

  2. curl+openssl编译

    curl不支持openssl的静态库,所以编译openssl的时候,应该加上shared 参数,记录一下我亲手编译的参数: ./configure --prefix=/usr/local/openss ...

  3. Fiddler 工作原理

    Fiddler工作原理: 就在在客户端与服务器端创建一个代理服务器: 在开启Fiddler后,Fiddler会自动窜改浏览器的代理,例如我们打开Fiddler,打开IE浏览器--设置--Interne ...

  4. The Singleton pattern

    作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 单例模式的结构 单例模式的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一 ...

  5. mvc局部视图

    新建一个控制器啊! public ActionResult Index() { ViewBag.title = "this is title!!!"; return View(); ...

  6. Java 第7章 数组

    第七章 (数组) 为什么需要数组 java 考试结束后,老师给张浩分配了一项任务,让他计算全班(30人)的平均分 int stu1=95; int stu2=95; int stu3=95; int ...

  7. Win7 64位 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6

    书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...

  8. <转>ＭＦＣ注册系统/全局热键。

    <转>MFC注册系统/全局热键. 1. BEGIN_MESSAGE_MAP(CRS232TESTDlg, CDialog) //{{AFX_MSG_MAP(CRS232TESTDlg) O ...

  9. 二叉搜索树、B树

    二叉搜索树又叫二叉排序树. B树又可写为B-树,“B-树”种的“-”无区分意义. 此外,还有B+树,B*树.

  10. ＃笔记＃ CSS工作流

    目录 明确代码规范 CSS Reset 关于前缀 浮动闭合 CSS的前处理器(Preprocessor)和后处理器(Postprocessor) 明确代码规范 目的是确保跨平台协作多人开发的代码显示界 ...