PC端拖拽

最新推荐文章于 2023-06-12 17:31:28 发布

西风XF

最新推荐文章于 2023-06-12 17:31:28 发布

阅读量510

点赞数

分类专栏： js 文章标签： js onmousedown onmousemove onmouseup drag

本文链接：https://blog.csdn.net/qq_36242361/article/details/76546473

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

-----------------笔记--------------------

效果：PC端窗口拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#oDiv{
				position: absolute;
				height:100px;
				width:100px;
				border:1px solid #000;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="oDiv"></div>
		<script type="text/javascript">
			var oDiv = document.getElementById("oDiv");
			oDiv.onmousedown = function(ev){
				var ev = ev || event;
				var divX = ev.clientX - document.body.scrollLeft - oDiv.offsetLeft;
				var divY = ev.clientY - document.body.scrollTop - oDiv.offsetTop;
				
				
				document.onmousemove = function(ev){
					var ev = ev || event;
					oDiv.style.left = ev.clientX + document.body.scrollLeft - divX + "px";
					oDiv.style.top = ev.clientY + document.body.scrollTop - divY + "px";
				}
				oDiv.onmouseup = function(){
					document.onmousemove = null;
					oDiv.onmouseup = null;
				}
				return false;
			};
		</script>
	</body>
</html>