语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>js实现一个可以兼容PC端和移动端的div拖动效果

js实现一个可以兼容PC端和移动端的div拖动效果

2019/6/6 7:14:45 0人评论 160次 作者:最骚的就是你

果…

原文:https://www.cnblogs.com/libin-1/p/6149057.html

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.touches[0].clientX和event.touches[0].clientY。


下面就来说说怎么实现这个效果吧。 

先来分析一个拖动的流程,以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的是给页面添加一个阻止默认事件的函数。


下面是整个代码,点击这里查看


<!DOCTYPE html>

<html>

<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>

 如有问题请指正,谢谢!


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-4 http://www.yuyanba.com
欢迎【弗吉尼亚州 】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮