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

女爷i 2022-07-14 12:22 116阅读 0赞

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

下面就来说说怎么实现这个效果吧，先看一下效果：  
PC端  
![PC端效果][PC]

移动端  
![移动端效果][SouthEast]

先来分析一个拖动的流程，以PC端为例，首先是鼠标按下（`mousedown`事件），然后移动（`mousemove`事件），最后释放鼠标（`mouseup`事件），首先要设置一个变量记录鼠标是否按下，在鼠标按下的时候，我们做一个标记，然后需要记录一下鼠标当前的坐标，还有这个div当前的偏移量，当鼠标开始移动的时候，记录下鼠标当前的坐标，用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。

下面来看一下代码：

然后在将事件加入到这个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下模拟移动端测试，点击[这里查看][Link 1]：

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

如有问题请指正，谢谢！

[PC]: /images/20220714/43ff6218ad1b4b1fbc4a066545288072.png
[SouthEast]: /images/20220714/f6bd0c1164e74c228bfa29bfe31a5475.png
[Link 1]: https://weiqiyjjs.github.io/room/example/jsexample/divmove.html