(function () {
|
// 获取相关DOM元素
|
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;
|
|
// 鼠标拖动事件
|
document.onmousemove = function (e) {
|
// 鼠标拖动的终止位置
|
let endX = e.clientX;
|
|
// 计算移动的距离
|
let moveLen = left.left + (endX - startX);
|
|
// 获取容器的最大宽度（排除拖拽条宽度）
|
let maxWidth = box.clientWidth - resize.offsetWidth;
|
|
// 限制左边区域的最小宽度为30px
|
if (moveLen < 300) moveLen = 300;
|
|
// 限制左边区域的最大宽度为最大宽度 - 右侧最小宽度
|
if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;
|
|
// 设置左边区域的宽度
|
left.style.width = moveLen + 'px';
|
|
// 设置右边区域的宽度
|
mid.style.width = (maxWidth - moveLen) + 'px';
|
};
|
|
// 鼠标松开事件
|
document.onmouseup = function (evt) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
resize.releaseCapture && resize.releaseCapture(); // 释放鼠标捕获
|
};
|
|
// 设置鼠标捕获
|
resize.setCapture && resize.setCapture();
|
|
return false; // 阻止默认事件
|
};
|
})();
|
