原生JS鼠标拖拽的原理及实现

最新推荐文章于 2024-03-06 23:50:33 发布

寒江独

最新推荐文章于 2024-03-06 23:50:33 发布

阅读量1.5k

点赞数 2

本文链接：https://blog.csdn.net/fandyvon/article/details/88720752

版权

JS鼠标拖拽的原理及实现

原生JS鼠标拖拽的原理及实现。

我们在网页操作的时候，经常用到鼠标拖拽元素的行为。今天就来讨论一下鼠标拖拽元素的原理及简单的实现过程。首先鼠标拖拽要用到三大事件。 onmousedown：鼠标选择元素 onmousemove：鼠标移动元素 onmouseup：释放元素也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。在这个选择，移动，释放的过程中有这些步骤：

1、当鼠标选择元素时，onmousedown事件，计算鼠标的位置

怎么计算鼠标在元素上的位置呢？

images

如上图，A点为鼠标在元素上的位置。我们需要计算的是C段的距离。那么我们可以用鼠标到文档的距离减去元素的文档的距离（B段）就能得到C段的距离，也就是鼠标在元素上的位置。然后将C段的距离用变量存起来。鼠标到文档的距离是：ev.clientX 元素到文档的距离是：offsetLeft

2、当元素移动到某一个位置的时候，我们要知道元素在文档的位置。也就是要得出B段的距离

images

我们在步骤1的时候已经得出了C段的距离，也就是鼠标到元素的距离。当元素移动的时候，我们要得出B段的距离，这个时候就用鼠标到文档的距离减去鼠标到文档的距离（C段）即可。 onmousemove事件：当鼠标在一个元素上移动时候触发触发的频率并不是按照像素来计算的，而是按照间隔时间来计算的。在一定时间内，当鼠标的位置与上一次的位置发生了改变，就会触发一次。

3、同样的，确定鼠标和元素在文档的位置，也要用到Y轴的值。和X轴类似。

4、当鼠标要释放元素时，让其onmouseup的值和onmousemove的值等于null即可。

下面是执行过程：

 
   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽的原理及实现</title>
<style>
	#div{width: 100px;height: 100px;background: red;position: absolute;left:200px;top:200px;}
</style>
</head>
<body>
	<div id="div"></div>
</body>
</html>
JS代码
<script type="text/javascript">
window.onload=function(){

	var oDiv=document.getElementById('div');

	oDiv.onmousedown=function(ev){

		var ev=ev||event;

		var oLeft=ev.clientX - this.offsetLeft;
		var oTop=ev.clientY - this.offsetTop;

	document.onmousemove=function(ev){
		var ev=ev||event;

		oDiv.style.left=ev.clientX-oLeft+'px';

		oDiv.style.top=ev.clientY-oTop+'px';
	}

	document.onmouseup=function(){

		document.onmousemove=document.onmouseup=null;
	}
    }
}
</script>
 
  

在线操作

总结：

1、拖拽中发生三大事件，因此我们要写三段代码

2、在编写的过程中，我误将三个事件写成单独的三段，结果导致在onmousedown中声明的变量在onmousemove中不起效果。所有事件包含在一个函数里面，再函数里面再进行事件的执行。

寒江独

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
原生JS鼠标拖拽的原理及实现

JS鼠标拖拽的原理及实现原生JS鼠标拖拽的原理及实现。我们在网页操作的时候，经常用到鼠标拖拽元素的行为。今天就来讨论一下鼠标拖拽元素的原理及简单的实现过程。首先鼠标拖拽要用到三大事件。onmousedown：鼠标选择元素onmousemove：鼠标移动元素onmouseup：释放元素也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。在这个选择，移动...
复制链接

扫一扫