js拖拽

贵哥的编程之路

发布于 2020-10-30 10:38:06

4.5K0

发布于 2020-10-30 10:38:06

/*js拖拽逻辑: 第一：为什么要定位? 因为

往左往上left top要定位的哈第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 第三：为什么down是div.move与up是document. 因为鼠标移动是在document移动,点击是在div上点击.其实一句话,鼠标移动div跟着移动而已. */ 核心代码：

代表着鼠标到可视区-div到可视区===div到可视区.

代表了***移动后的***的鼠标到可视区的----div到鼠标的距离. 这里面可能有点难理解，我举个例子把好吧.比如我点击时的位置是x=100 鼠标=150，y=100 鼠标=150.move后的位置是x=350 鼠标400,y=350. 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置.

js拖拽:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;list-style: none;}
		#div
		{
			width: 100px;
			height:100px;
			background: red;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="div"></div>
	<script type="text/javascript">
		div.onmousedown=function(cyg)
		{
			var ev=cyg||event;
			var l=ev.clientX-div.offsetLeft;
			var t=ev.clientY-div.offsetTop;
			document.onmousemove=function(liwen)
			{
				var ev=liwen||event;
				div.style.left=ev.clientX-l+"px";
				div.style.top=ev.clientY-t+"px";
			}
			document.onmouseup=function()
			{
				document.onmousemove=null;
				document.onmouseup=null;
			};
			return false;
		}
	</script>
</body>
</html>

效果图：