移动方块

最新推荐文章于 2023-06-21 23:00:24 发布

十里相思

最新推荐文章于 2023-06-21 23:00:24 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/weixin_43986060/article/details/86524536

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
		<script>
			var b=false;
			var offsetX;
			var offsetY;
			document.onmousemove=function(){
				var div=document.getElementById('div1');
				if(b){
					div.style.left=event.clientX-offsetX+'px';
					div.style.top=event.clientY-offsetY+'px';
					div.style.cursor='default';
				}
			}
			document.onmousedown=function(){
				
				var div=document.getElementById('div1');
				var minX=div.offsetLeft;
				var maxX=div.offsetLeft+div.offsetWidth;
				var minY=div.offsetTop;
				var maxY=div.offsetTop+div.offsetWidth;
				
				var x=event.clientX;
				var y=event.clientY;
				if(x>minX&&x<maxX&&y>minY&&y<maxY){
					b=true;
				}
				offsetX=event.offsetX;
				offsetY=event.offsetY;
				
			}
			document.onmouseup=function(){
				b=false;
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>