原理:
模拟拖拽最终效果和在桌面上移动文件夹的效果类似
鼠标按下时，拖拽开始。鼠标移动时，被拖拽元素跟着鼠标一起移动。鼠标抬起时，拖拽结束
所以，拖拽的重点是确定被拖拽元素是如何移动的
假设，鼠标按下时，鼠标对象的clientX和clientY分别为x1和y1。元素距离视口左上角x轴和y轴分别为x0和y0
鼠标移动的某一时刻，clientX和clientY分别为x2和y2
所以，元素移动的x轴和y轴距离分别为x2-x1和y2-y1
元素移动后，元素距离视口左上角x轴和y轴的位置分别为
X = x0 + (x2-x1)
Y = y0 + (y2-y1)
代码实现
将上面的原理用代码实现如下
鼠标按下时，初始态的x0和y0分别用offsetLeft和offsetTop表示
鼠标移动时，瞬时态的x和y分别赋值为定位后元素的left和top
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;top:0;left:0;"></div>
<script>
test.onmousedown = function(e){
e = e || event;
//获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
test.onmousemove = function(e){
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
x2 = e.clientX;
y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
test.style.left = X + 'px';
test.style.top = Y + 'px';
}
test.onmouseup = function(e){
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
test.onmousemove = null;
}
}
</script>
</body>
</html>
效果图片：
原文链接：https://www.qiquanji.com/post/8062.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知