原生JS鼠标拖拽的原理及实现-优快云博客

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>

  