js拖拽

时间 2019-11-08

原文原文链接

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

先看一下以前写的：vue

若是鼠标慢慢移动，拖拽是没有任何问题的，若是速度快了，那么鼠标和元素就会分离。由于咱们是监听鼠标移动事件，鼠标移动的时候须要执行咱们定义的函数，函数执行会有一些延时，当鼠标移动速度过快，致使函数的延时使得元素跟不上鼠标移动的速度，从而鼠标移出了元素，也就形成了元素不跟随鼠标了。浏览器

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

document：函数

body：工具

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

最后贴上代码：code

<!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和移动端的。cdn

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

1. js 拖拽
2. js拖拽
3. JS拖拽
4. js拖拽验证
5. js拖拽效果
6. js 实现拖拽
7. 原生js拖拽
8. js特效拖拽
9. js 拖拽实现
10. js模拟拖拽
更多相关文章...
• jQuery Mobile swiperight 事件 - jQuery Mobile 教程
• jQuery Mobile swipeleft 事件 - jQuery Mobile 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议