前段时间写了一个简单的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. Javascript日期比较

    var date1=Date.parse("2014-9-3 11:40:14".replace(/-/g,"/")); var date2=Date.pars ...

  2. 深入理解c#（第三版）（文摘）

    第一部分 基础知识 第1章 C#开发的进化史 1.3 1.3.1 表示未知的价格 public decimal? Price { get; private set; } new ProductWith ...

  3. Postman-进阶

    Postman-简单使用 Postman-进阶使用 Postman-CI集成Jenkins 管理请求 保存请求-添加“打开百度首页请求” 设置请求方式为Get,地址为www.baidu.com.点击右 ...

  4. Windows服务器安装配置PHP7.0环境图文教程

    摘自http://www.111cn.net/phper/linux-php/109865.htm Windows服务器安装配置PHP7.0环境图文教程 www.111cn.net 更新:2016-0 ...

  5. MATLAB常用操作

    1.点乘,点除,点乘方 点乘(对应元素相乘),必须同维或者其中一个是标量,a.*b 点除,a.\b表示矩阵b的每个元素除以a中对应元素或者除以常数a,a./b表示常数a除以矩阵b中每个元素或者矩阵a除 ...

  6. C# 图片压缩

    /// <summary>        /// 图片压缩方法        /// </summary>        /// <param name="sF ...

  7. CentOS 7 安装 vmware-tools

    [原创]标题:<CentOS 7 安装 vmware-tools>:作者:肖雪峰,QQ:35360657. 用 VMware Workstation 11 新安装了CentOS 7虚拟机, ...

  8. unity发布安卓 截图保存到本地

    using System.IO; //获取系统时间并命名相片名 System.DateTime now = System.DateTime.Now; string times = now.ToStri ...

  9. 用php创建mysql数据库

    接触php就等于向后台更近了一步,之前一直在做前端,不过也在学php,但一直没敢写博客,现在终于有勇气迈向了这一步,还请各位博友多多担待. 服务器是后台开发的必备工具,但对于一般初学者来说是没有自己的 ...

  10. 如何编写 Cloud9 JavaScript IDE 的功能扩展

    上周末我们在JSConf.eu发布了 Cloud9 IDE ,同时发布了对应的GitHub项目.在4天时间里该项目得到340个人的关注和将近50个fork.Cloud9的口号是由"由Java ...