前端开发之图层拖拽与调整大小

最新推荐文章于 2025-08-12 11:04:20 发布

阿赛工作室

最新推荐文章于 2025-08-12 11:04:20 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS javascript

本文链接：https://blog.youkuaiyun.com/qq_25753445/article/details/98678502

javascript 同时被 3 个专栏收录

55 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="UTF-8">
		<title>图层拖拽与调整大小</title>
		<style>
			.box {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				border: 2px solid #ccc;
				cursor: pointer;
				position: absolute;
				overflow: hidden;
				resize: both;
				top: 20px;
				left: 100px;
				min-width: 120px;
				min-height: 90px;
				max-width: 400px;
				max-height: 300px;
			}

			.box:hover,
			.box:focus {
				outline: none;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>

		<div class="box" id="nbox" tabindex="2" style="top:400px;"></div>
		<div class="box" id="box" tabindex="1"></div>

	</body>
	<script>
		var box = document.getElementById("box");
		box.onmousedown = function(env) {
			// 兼容event事件
			var env = env || window.event;
			// 获取鼠标的坐标
			var x = env.clientX;
			var y = env.clientY;
			//  获取元素的坐标
			var left = box.offsetLeft;
			var top = box.offsetTop;
			// 获取鼠标在元素中的坐标
			var x_left = x - left;
			var y_top = y - top;
			//  鼠标点击后改变颜色
			box.style.background = "red";
			//  元素的移动事件函数
			box.onmousemove = function(env) {
				// 兼容event事件
				var env = env || window.event;
				//  获取元素移动时的鼠标的坐标
				var x = env.clientX;
				var y = env.clientY;
				//  元素的移动坐标
				box.style.left = (x - x_left) + "px";
				box.style.top = (y - y_top) + "px";
			}
		};
		//  鼠标弹出的事件函数
		box.onmouseup = function() {
			box.style.background = "skyblue";
			// 在鼠标弹出后再次调用元素的鼠标移动事件
			box.onmousemove = function() {};
		};
	</script>
</html>