前段时间写了一个简单的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. C语言小练习一

    题目要求:国王将金币作为工资,发放给忠诚的骑士.第1天,骑士收到一枚金币:之后两天(第2天和第3天)里,每天收到两枚金币:之后三天(第4.5.6天)里,每天收到三枚金币:之后四天(第7.8.9.10天 ...

  2. 【九度OJ】题目1054：字符串内排序

    题目描述: 输入一个字符串,长度小于等于200,然后将输出按字符顺序升序排序后的字符串. 输入: 测试数据有多组,输入字符串. 输出: 对于每组输入,输出处理后的结果. 样例输入: bacd 样例输出 ...

  3. Linq-分组统计

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  4. [SystemC] Setting Up the Environment

    My operating system is Ubuntu 12.04. 0. Checking Your Compilers First thing first, you will need the ...

  5. [XAF] How to represent an enumeration property via a drop-down box with check boxes

    https://www.devexpress.com/Support/Center/Example/Details/E689

  6. poj 3621 二分+spfa判负环

    http://poj.org/problem?id=3621 求一个环的{点权和}除以{边权和},使得那个环在所有环中{点权和}除以{边权和}最大. 0/1整数划分问题 令在一个环里,点权为v[i], ...

  7. webuploader 断点续传

    webuploader 实现 断点续传webuploader是百度开发的上传文件前端控件.可支持html5和flash,因此对浏览器的兼容比较好.因为需要用到ie8,ie8不支持html5,所以必须支 ...

  8. list-style

    list-style: inside url(" "); 默认li的点在父级div框的外面,在li上加样式list-style-position: inside;可以使点在框内:点 ...

  9. CUTE-WRV2.1+TCP core(COM5402)的TCP带宽测试

    问题的提出 测试TCP的带宽,硬件平台CUTE-WRV2.1,固件版本WRPCV3.0+COM5402. 代码.工具及实现 1. 在固件中,增加模块,收到TCP数据包后不断地往外发数: library ...

  10. Mac OS X 常用快捷键