原生拖拽分割窗口

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>鼠标移动分割窗口</title>
        <style type="text/css">
            .wrap {
                border: 1px solid red;
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: space-between;
            }

            .left {
                width: calc(35% - 10px);
                background-color: aqua;
                height: 100%;
            }

            .middle {
                text-align: center;
                line-height: 100vh;
            }

            .middle span:hover {
                cursor: w-resize;
            }

            .right {
                width: calc(65% - 10px);
                background-color: chocolate;
                height: 100%;
            }
        </style>
    </head>
    <body onload="initLayout();">
        <div class="wrap">
            <div class="left" id="leftLayout">
                <div style="margin-top: 300px;text-align: center;"><span>默认宽度:35%</span>移动实时宽度：<span id="ls"></span>px</div>
            </div>
            <div class="middle" id="middleLayout" style="width:20px;text-align: center;"><span>|||</span></div>
            <div class="right" id="rightLayout">
                <div style="margin-top: 300px;text-align: center;"><span style="margin-right:10px;">默认宽度:65%</span>移动实时宽度：<span id="rs"></span>px</div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                console.log('--->>> 初始化加载..');
                console.log(event);
                var leftLayout = document.getElementById("leftLayout");
                var middleLayout = document.getElementById("middleLayout");
                var rightLayout = document.getElementById("rightLayout");
                var gutterSize = 300 //限制两边最小拖拽距离
                console.log(' 左侧元素 --->>>', leftLayout);
                console.log(' 中间元素 --->>>', middleLayout);
                console.log(' 右侧元素 --->>>', rightLayout);
                middleLayout.onmousedown = function(evd) {
                    var leftWidth = parseInt(leftLayout.offsetWidth);
                    var rightWidth = parseInt(rightLayout.offsetWidth);
                    var evd = evd || event;
                    var mouseDownX = evd.clientX;
                    var mouseDownOffsetX = evd.offsetX;
                    console.log('--->>>鼠标按下的ev：', evd);
                    console.log('--->>> 鼠标按下的X轴：', mouseDownX);
                    document.onmousemove = function(ev) {
                        var ev = ev || event;
                        console.log('--->>> 鼠标移动产生的ev：', ev);
                        console.log('--->>> 鼠标移动的X轴：', ev.clientX);
                        var maxRW = parseInt(mouseDownX) + rightWidth - gutterSize; //左侧最大分割值
                        var maxLW = parseInt(mouseDownX) - leftWidth + gutterSize; //右侧最大分割值
                        var evCMX = parseInt(ev.clientX)
                        var newLeftWidth = leftWidth + (evCMX - parseInt(mouseDownX))
                        var newRightWidth = rightWidth + (parseInt(mouseDownX) - evCMX)
                        console.log(' 左侧宽度 --->>> ', newLeftWidth);
                        console.log(' 右侧宽度 --->>> ', newRightWidth);
                        document.getElementById("ls").innerHTML = newLeftWidth;
                        document.getElementById("rs").innerHTML = newRightWidth;
                        // 当出现负数时 or 超过允许的最大宽度时，不进行赋值
                        if (newLeftWidth > 0 && newRightWidth > 0 && evCMX > maxLW && evCMX < maxRW) {
                            console.log('---->>> 重置宽度.');
                            leftLayout.style.width = newLeftWidth + "px";
                            rightLayout.style.width = newRightWidth + "px";
                        }
                    }
                    document.onmouseup = function(ev) {
                        document.onmousemove = null;
                    }
                }
            }
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容