js拖拽

最新推荐文章于 2024-07-21 13:38:37 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-07-21 13:38:37 发布

阅读量817

点赞数 2

分类专栏：手机端大全解决

本文链接：https://blog.csdn.net/qq_37805832/article/details/109323219

版权

手机端大全解决专栏收录该内容

9 篇文章 0 订阅

订阅专栏

/*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>