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

Posted 旗smile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现一个可以兼容PC端和移动端的div拖动效果相关的知识,希望对你有一定的参考价值。

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedownmousemovemouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstarttouchmovetouchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientXevent.clientY,在移动端获取坐标位置则是:event.touches[0].clientXevent.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].clientXevent.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拖动效果的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs自定义指令实现移动端和pc端的div随意拖拽。

前端开发中pc端和移动端的区别

前端:移动端和PC端的区别

移动端和PC端的区别有哪些?

Html+Css+js实现春节倒计时效果(移动端和PC端)

vuecli3 实现 移动端和pc端 界面切换(两套代码)