javascript(3) : 鼠标拖动画矩阵

最新推荐文章于 2023-04-08 21:18:37 发布

Lxinccode

最新推荐文章于 2023-04-08 21:18:37 发布

阅读量694

点赞数 1

分类专栏：前端文章标签： html js 鼠标画矩阵

原文链接：https://blog.csdn.net/baolin811/article/details/51446283

版权

前端专栏收录该内容

63 篇文章 3 订阅

订阅专栏

参考 : HTML+js实现鼠标绘制可拖动矩形_baolin811的专栏-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312" />
		<title></title>
		<style type="text/css">
			.box {
				border: 3px solid #FF0000;
				width: 0px;
				height: 0px;
				position: absolute;
				opacity: 0.5;
				cursor: move;
			}
		</style>

	</head>
	<body>
		<div>

		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(e) {
			e = e || window.event;
			// startX, startY 为鼠标点击时初始坐标
			// diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
			var startX, startY, diffX, diffY;
			// 是否拖动，初始为 false
			var dragging = false;

			// 鼠标按下
			document.onmousedown = function(e) {
				startX = e.pageX;
				startY = e.pageY;

				// 如果鼠标在 box 上被按下
				if (e.target.className.match(/box/)) {
					// 允许拖动
					dragging = true;

					// 设置当前 box 的 id 为 moving_box
					if (document.getElementById("moving_box") !== null) {
						document.getElementById("moving_box").removeAttribute("id");
					}
					e.target.id = "moving_box";

					// 计算坐标差值
					diffX = startX - e.target.offsetLeft;
					diffY = startY - e.target.offsetTop;
				} else {
					// 清除之前画的
					removeElementsByClass("box");
					// 在页面创建 box
					var active_box = document.createElement("div");
					active_box.id = "active_box";
					active_box.className = "box";
					active_box.style.top = startY + 'px';
					active_box.style.left = startX + 'px';
					document.body.appendChild(active_box);
					active_box = null;
				}
			};

			// 鼠标移动
			document.onmousemove = function(e) {
				// 更新 box 尺寸
				if (document.getElementById("active_box") !== null) {
					var ab = document.getElementById("active_box");
					ab.style.width = e.pageX - startX + 'px';
					ab.style.height = e.pageY - startY + 'px';
				}

				// 移动，更新 box 坐标
				if (document.getElementById("moving_box") !== null && dragging) {
					var mb = document.getElementById("moving_box");
					mb.style.top = e.pageY - diffY + 'px';
					mb.style.left = e.pageX - diffX + 'px';
				}
			};

			// 鼠标抬起
			document.onmouseup = function(e) {
				// 禁止拖动
				dragging = false;
				if (document.getElementById("active_box") !== null) {
					var ab = document.getElementById("active_box");
					ab.removeAttribute("id");
					// 如果长宽均小于 3px，移除 box
					if (ab.offsetWidth < 3 || ab.offsetHeight < 3) {
						document.body.removeChild(ab);
					}
				}
			};
		};

		// 根据class删除div
		function removeElementsByClass(className) {
			var elements = document.getElementsByClassName(className);
			while (elements.length > 0) {
				elements[0].parentNode.removeChild(elements[0]);
			}
		}
	</script>
</html>