开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。
先看一下之前写的：
如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。因为我们是监听鼠标移动事件，鼠标移动的时候需要执行我们定义的函数，函数执行会有一些延时，当鼠标移动速度过快，导致函数的延时使得元素跟不上鼠标移动的速度，从而鼠标移出了元素，也就造成了元素不跟随鼠标了。
解决的办法就是把监听元素换成document或者body，当函数执行延时了，因为鼠标还是在document和body上，也能一直触发函数，两者的效果是一样的，只有一个小区别
document：
body：
两者都能很流畅的拖动，区别就是浏览器上面的地方，不属于body，所以使用body会失效，建议使用document最好。
最后贴上代码：
代码语言：javascript复制<!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和移动端的。
（完）
