手动拖动div改变窗口高度——三栏

需求：通过鼠标拉动窗口边界，调整窗口显示大小；
如下图：

HTML

<div class="box" id="box">
	<div class="left" id="left">
		<!--上div内容-->
	</div>
	<!-- 通过一个 div 来充当区域边框实现拖动 -->
	<div id="resize" class="resize" title="收缩侧边栏"></div>
	<div class="mid" id="center">
		<!--中间div内容-->
	</div>
	<div id="resize2" class="resize" title="收缩侧边栏"></div>
	<div class="mid2" id="right">
		<!--下div内容-->
	</div>
</div>

JS代码

let resize = document.getElementById('resize');
	let resize2 = document.getElementById('resize2');
	let left = document.getElementById('left');
	let mid = document.getElementById('center');
	let right = document.getElementById('right');
	let box = document.getElementById('box');

	// 鼠标按下事件
	resize.onmousedown = function (e) {
		// 记录坐标起始位置
		let startY = e.clientY;

		// 左边元素起始高度
		left.left = left.offsetHeight;
		console.log('高度：', resize.left);
		// 鼠标拖动事件
		document.onmousemove = function (e) {
			// 鼠标拖动的终止位置
			let endX = e.clientY;
			// console.log(e.clientY,"e.clientY");
			// （endx-startx）= 移动的距离。 resize.left + 移动的距离=左边区域最后的宽度
			let moveLen = left.left + (endX - startY);
			console.log(moveLen, resize.offsetHeight, "移动的距离移动的距离");

			// 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度 
			let maxWidth = 1110 - resize.offsetHeight;

			// 限制上边区域的最小高度为30px
			if (moveLen < 30) moveLen = 30;

			// 中间区域最小宽度为 150px 限制上边区域到150后不能再拉宽
			if (moveLen > maxWidth - 150) moveLen = maxWidth - 150;


			// 设置左边区域的高度，通过换算为百分比的形式，实现窗体放大缩小自适应 
			// console.log(moveLen / maxWidth * 100);
			left.style.height = moveLen + 'px';

			// 右边区域即是总大小 - 左边宽度 - 拖动条宽度
			// console.log(((maxWidth - moveLen) / maxWidth * 100));
			mid.style.height = ((maxWidth - moveLen) - right.clientHeight) + 'px';
		};
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
			resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
		};
		resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
		return false;
	};
	resize2.onmousedown = function (e) {
		// 记录坐标起始位置
		let startY = e.clientY;

		// 左边元素起始高度
		right.right = right.offsetHeight;
		// 鼠标拖动事件
		document.onmousemove = function (e) {
			// 鼠标拖动的终止位置
			let endX = e.clientY;
			console.log(e.clientY, "e.clientY");
			// （endx-startx）= 移动的距离。 resize.left + 移动的距离=左边区域最后的宽度
			let moveLen = right.right - (endX - startY);
			console.log(moveLen, resize.offsetHeight, "移动的距离移动的距离");

			// 左右两边区域的总高度 = 大容器高度 - 中间区域拖拉框的高度 
			let maxWidth = 1110 - resize.offsetHeight * 2;

			// 限制左边区域的最小高度为30px
			if (moveLen < 30) moveLen = 30;

			// 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
			if (moveLen > maxWidth - 150) moveLen = maxWidth - 150;


			// 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应 
			// console.log(moveLen / maxWidth * 100);
			right.style.height = moveLen + 'px';

			// 右边区域即是总大小 - 左边宽度 - 拖动条宽度
			// console.log(((maxWidth - moveLen) / maxWidth * 100));
			mid.style.height = ((maxWidth - moveLen) - left.clientHeight) + 'px';
		};
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
			resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
		};
		resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
		return false;
	};

<style>
	*{
		margin: 0;
		padding: 0;
	}
	html,body {
		width: 100%;
		height: 100%;
	}
	.box {
		width: 100%;
		height: 100%;
		/* display: flex; */
	}

	/*左侧div样式*/
	.left {
		width: 100%;
		/*左侧初始化宽度*/
		height: 300px;
		background: #d6d6d6;
		/* flex-shrink: 0; */
	}

	/*拖拽区div样式*/
	.resize {
		cursor: row-resize;
		position: relative;
		background-color: yellow;
		width: 100%;
		height: 5px;
		background-size: cover;
		background-position: center;
		font-size: 32px;
	}

	/*拖拽区鼠标悬停样式*/
	.resize:hover {
		background-color: #444444;
	}

	/*右侧div'样式*/
	.mid {
		width: 100%;
		/*右侧初始化宽度*/
		height: 500px;
		background-color: red;
		/* flex-shrink: 0; */
	}

	.mid2 {
		width: 100%;
		/*右侧初始化宽度*/
		height: 300px;
		background-color: green;
		/* flex-shrink: 0; */
	}
</style>

水平拖拽可以直接下载https://download.csdn.net/download/weixin_41843107/88376505