js拖拽

wade

发布于 2020-04-24 10:04:54

5.3K0

发布于 2020-04-24 10:04:54

开发了那么久，对于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和移动端的。

（完）

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-29，如有侵权请联系 cloudcommunity@tencent.com 删除

document