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