手动拖动div改变窗口宽高大小

背景

最近在项目中遇到一个需求，页面内某个区域的大小通过鼠标拖动边框来实现。下面通过原生js来实现效果。

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="right">
		<!--右侧div内容-->
	</div>
</div>

css 样式

.box {
 	width: 100%;
    height: 300px; 
	display: flex;
}
/*左侧div样式*/
.left {
    width: calc(30% - 5px);  /*左侧初始化宽度*/   
    height: 100%;
    background: #d6d6d6; 

}
/*拖拽区div样式*/
.resize {
    cursor: col-resize; 
    position: relative; 
    background-color: yellow; 
    width: 5px;
    height: 300px;
    background-size: cover;
    background-position: center; 
    font-size: 32px; 
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
    background-color: #444444;
}
/*右侧div'样式*/
.mid { 
    width: 70%;   /*右侧初始化宽度*/
    height: 100%;
    background-color: red; 
}

js 代码

let resize = document.getElementById('resize');
let left = document.getElementById('left');
let mid = document.getElementById('right');
let box = document.getElementById('box'); 
  
// 鼠标按下事件
resize.onmousedown = function (e) {
 	// 记录坐标起始位置
	let startX = e.clientX;
	
	// 左边元素起始宽度
	left.left = left.offsetWidth;
	console.log('宽度：',resize.left);
	// 鼠标拖动事件
	document.onmousemove = function (e) {
		// 鼠标拖动的终止位置
		let endX = e.clientX;  
		
		// （endx-startx）= 移动的距离。resize.left + 移动的距离=左边区域最后的宽度
		let moveLen = left.left + (endX - startX); 
		console.log(moveLen);
		
		 // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度 
		let maxWidth = box.clientWidth - resize.offsetWidth; 
		
		// 限制左边区域的最小宽度为30px
		if (moveLen < 30) moveLen = 30; 
		
		// 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
		if (moveLen > maxWidth - 150) moveLen = maxWidth - 150; 


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

实现效果

上下拉动实现同样的思路

	元素宽度加边框  offsetWidth
	元素宽度不加边框  clientWidth 
	到窗口最左边的距离  offsetLeft
	鼠标x轴坐标位置  e.clientX 
	元素宽度设置 style.width