先看一下之前写的:
image
如果鼠标慢慢移动, 拖拽是没有任何问题的, 如果速度快了, 那么鼠标和元素就会分离. 因为我们是监听鼠标移动事件, 鼠标移动的时候需要执行我们定义的函数, 函数执行会有一些延时, 当鼠标移动速度过快, 导致函数的延时使得元素跟不上鼠标移动的速度, 从而鼠标移出了元素, 也就造成了元素不跟随鼠标了.
解决的办法就是把监听元素换成 document 或者 body, 当函数执行延时了, 因为鼠标还是在 document 和 body 上, 也能一直触发函数, 两者的效果是一样的, 只有一个小区别
document:
image
body:
image
两者都能很流畅的拖动, 区别就是浏览器上面的地方, 不属于 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, 感觉还行.
image
来源: http://www.jianshu.com/p/0c23b6d8e572