前段时间写了一个简单的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. 在命令行到处MYSQL数据到EXCEL表

    有时候需要将 MySQL 的数据导出成 excel,这很简单,无需第三方工具,直接 MySQL 命令行就自带了这样的功能.比如: 1 SELECT * FROM nowamagic into outf ...

  2. hdoj 1596 find the safest rode

    Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条 ...

  3. yii 图片展示

    <?= DetailView::widget([ 'model' => $model, 'attributes' => [ 'id', 'name', 'time', 'pic', ...

  4. java线程小结3

    1. 多线程概述 要实现多线程可以通过继承Thread和实现Runnable接口.不过这两者之间存在一些区别.其中最重要的区别就是,如果一个类继承Thread类,则不适合于多个线程共享资源,而实现了R ...

  5. ubuntu gcc-5 安装

    安装了一个ubuntu 15.10,没有集成vim,很失望,先安装个vim,sudo apt-get install vim. 开始获取g++-5: $ sudo add-apt-repository ...

  6. angularjs 1.x $q模块使用

    什么是$q $q是angularjs1.x中内置服务,在需要使用时可以注入它. angular.module('app').controller('myController', function my ...

  7. java 类反射记录

    Class的getDeclaredMethod方法是获取当前类下的所有方法,包括private修饰的,该方法不获取父类的方法. getMethod获取父类及本类下的所有public方法.

  8. 大型B2B网站开发手记 1

    本手记记录所有该B2B网站开发中遇到的问题和解决方法,一方面给大家一些思路,一方面提升自己,记录整个过程 1. 测试环境部署问题 部署环境是server2012 R2,部署上去发现WCF报错如下 sv ...

  9. Centos普通用户提权至ROOT

    1.利用/bin/ping的漏洞普通用户提权.(rws中的s) [root@localhost ~]# ls -l /bin/ping -rwsr-xr-x. root root 9月 /bin/pi ...

  10. iOS 项目改名～～～～～

    今早出现一个改名的囧事...先记录下...在此之前感谢整理过这片文章的作者 --- GarveyCalvin ,插眼!以下是正文---- 前言:在iOS开发中,有时候想改一下项目的名字,都会遇到很多麻 ...