js拖拽

最新推荐文章于 2023-10-14 12:41:19 发布

原创最新推荐文章于 2023-10-14 12:41:19 发布 · 269 阅读

CC 4.0 BY-SA版权

开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。

先看一下之前写的：

如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。因为我们是监听鼠标移动事件，鼠标移动的时候需要执行我们定义的函数，函数执行会有一些延时，当鼠标移动速度过快，导致函数的延时使得元素跟不上鼠标移动的速度，从而鼠标移出了元素，也就造成了元素不跟随鼠标了。

解决的办法就是把监听元素换成document或者body，当函数执行延时了，因为鼠标还是在document和body上，也能一直触发函数，两者的效果是一样的，只有一个小区别

document：

body：

两者都能很流畅的拖动，区别就是浏览器上面的地方，不属于body，所以使用body会失效，建议使用document最好。

最后贴上代码：


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        #box{

            position:absolute;

            width:100px;

            height:100px;

            background: red;

        }

        html, body{

            width:100%;

            height:100%;

        }

    </style>

</head>

<body>



<div id="box"></div>



<script>

    var el = document.getElementById('box');



    el.addEventListener('mousedown',(event) => {

        var startX = event.clientX,

            startY = event.clientY,

            left = el.offsetLeft,

            top = el.offsetTop;

        

        var moveFun = (event) => {

            var X = event.clientX - startX

            var Y = event.clientY - startY;

            el.style.left = `${left + X}px`;

            el.style.top = `${top + Y}px`;

        };

    

        document.addEventListener('mousemove',moveFun);

        

        el.addEventListener('mouseup',() => {

            document.removeEventListener('mousemove',moveFun);

        });

    });

</script>

</body>

</html>

几个点要注意，body样式必须设置，否则监听body会失效，document监听，移除也要是document，移除的时候是把方法传入，所以这边监听方法用函数表达式。之前在vue里面移除的时候就遇到过这个问题。如果是想移动端使用，就都改成监听touch，任何用touches里面的参数。当然，你也可以去写一个兼容PC和移动端的。

最后分享个PC录制GIF的小工具GifCam，感觉还行。