js实现鼠标拖拽改变div大小的同时另一个div宽度也变化

最新推荐文章于 2024-04-19 15:39:51 发布

Mr_yangx

最新推荐文章于 2024-04-19 15:39:51 发布

阅读量1k

点赞数 11

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Mr_yangx/article/details/136236690

版权

实现效果如下图所示

源码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
			 	width: 100%;
			    height: 300px; 
				display: flex;
			}
			/*左侧div样式*/
			.left {
			    width: calc(30% - 5px);  /*左侧初始化宽度*/   
			    height: 100%;
			    background: #36cfc9; 
				float: left;
			}
			/*拖拽区div样式*/
			.resize {
			    cursor: col-resize; 
			    position: relative; 
			    background-color: yellow; 
			    width: 5px;
			    height: 300px;
			    background-size: cover;
			    background-position: center; 
			    font-size: 32px; 
				float: left;
			}
			/*拖拽区鼠标悬停样式*/
			.resize:hover {
			    background-color: #444444;
			}
			/*右侧div'样式*/
			.mid { 
				float: left;
			    width: 70%;   /*右侧初始化宽度*/
			    height: 100%;
			    background-color: #b7eb8f; 
			}
		</style>
	</head>
	<body>
		<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>

	</body>
</html>

<script>
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 - 420) moveLen = maxWidth - 420; 


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

</script>