JavaScript如何实现拖动动态实时改变div的宽高 -六月初技术站

JavaScript如何实现拖动动态实时改变div的宽高

六月初 JavaScipt 2024-08-27 08:40:52

网站开发中拖拽效果在一些特殊的场景中会被使用到，通过拖动div改变位置或者宽高等数据，使其到达需要的目的效果。

那么在前端开发中是如何实现对div的拖动及监听操作呢？

如图，拖动红色小方块改变红色边框区域的宽高操作。

本文就前端开发中监听div的拖动来改变div的宽高给出详细案例说明，先给出完整代码。在代码最下方给出代码的解析说明。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			#showBox{
				width: 200px;
				height: 100px;
				border: 1px solid #999;
				position: relative;
			}
			#dragBox{
				position: absolute;
				right: 0;
				top: calc(50% - 10px);
				height: 20px;
				width: 20px;
				cursor: pointer;
				background-color: #f00;
			}
		</style>
		<div id="showBox">
			<div id="dragBox">
			</div>
		</div>
		<script>
			window.onload = function() {
				// 1. 获取两个大小div
				var ShowBox = document.getElementById('showBox');
				var DragBox = document.getElementById('dragBox');
				// 定义4个变量
				var disX = 0; //鼠标按下时光标的X值
				var disY = 0; //鼠标按下时光标的Y值
				var disW = 0; //拖拽前div的宽
				var disH = 0; // 拖拽前div的高
				//3. 给小div加点击事件
				DragBox.onmousedown = function(ev) {
					var ev = ev || window.event;
					disX = ev.clientX; // 获取鼠标按下时光标x的值
					disY = ev.clientY; // 获取鼠标按下时光标Y的值
					disW = ShowBox.offsetWidth; // 获取拖拽前div的宽
					disH = ShowBox.offsetHeight; // 获取拖拽前div的高
					document.onmousemove = function(ev) {
						var ev = ev || window.event;
						//拖拽时为了对宽和高 限制一下范围，定义两个变量
						var W = ev.clientX - disX + disW;
						var H = ev.clientY - disY + disH;
						if (W < 100) {
							W = 100;
						}
						if (W > 500) {
							W = 500;
						}
						if (H < 100) {
							H = 100;
						}
						if (H > 500) {
							H = 500;
						}
						ShowBox.style.width = W + 'px'; // 拖拽后物体的宽
						ShowBox.style.height = H + 'px'; // 拖拽后物体的高
					}
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
					}
				}
			}
		</script>
	</body>
</html>