移动方块

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

原创最新推荐文章于 2023-06-21 23:00:24 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML、CSS和JavaScript实现的拖拽式布局方法，允许用户通过鼠标操作来动态调整页面上div元素的位置，提供了一个交互式的网页设计体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>