(function () {
|
// 获取相关DOM元素
|
let resize = document.getElementById('resize');
|
let top = document.getElementById('top');
|
let bottom = document.getElementById('bottom');
|
let box = document.getElementById('box');
|
|
// 鼠标按下事件
|
resize.onmousedown = function (e) {
|
let startY = e.clientY;
|
|
// 记录起始高度
|
let startTopHeight = top.offsetHeight;
|
let startBottomHeight = bottom.offsetHeight;
|
|
document.onmousemove = function (e) {
|
let endY = e.clientY;
|
let moveLen = startTopHeight + (endY - startY); // 计算新的顶部高度
|
|
// 获取容器的最大高度（排除拖拽条的高度）
|
let maxHeight = box.clientHeight - resize.offsetHeight;
|
|
// 限制上方区域最小高度
|
if (moveLen < 30) moveLen = 30;
|
|
// 限制上方区域最大高度
|
if (moveLen > maxHeight - 100) moveLen = maxHeight - 100;
|
|
// 设置上方区域的高度
|
top.style.height = moveLen + 'px';
|
|
// 设置下方区域的高度
|
bottom.style.height = (maxHeight - moveLen) + 'px';
|
};
|
|
document.onmouseup = function () {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
resize.releaseCapture && resize.releaseCapture(); // 释放鼠标捕获
|
};
|
|
// 设置鼠标捕获
|
resize.setCapture && resize.setCapture();
|
|
return false; // 阻止默认事件
|
};
|
})();
|
