(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; // 阻止默认事件
    };
})();