实现效果如下图所示
源码如下
<!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; // 限制左边区域的最小宽度为30pxif (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>