原生拖拽分割窗口

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>鼠標(biāo)移動(dòng)分割窗口</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>默認(rèn)寬度:35%</span>移動(dòng)實(shí)時(shí)寬度：<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;">默認(rèn)寬度:65%</span>移動(dòng)實(shí)時(shí)寬度：<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(' 左側(cè)元素 --->>>', leftLayout);
                console.log(' 中間元素 --->>>', middleLayout);
                console.log(' 右側(cè)元素 --->>>', 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('--->>>鼠標(biāo)按下的ev：', evd);
                    console.log('--->>> 鼠標(biāo)按下的X軸：', mouseDownX);
                    document.onmousemove = function(ev) {
                        var ev = ev || event;
                        console.log('--->>> 鼠標(biāo)移動(dòng)產(chǎn)生的ev：', ev);
                        console.log('--->>> 鼠標(biāo)移動(dòng)的X軸：', ev.clientX);
                        var maxRW = parseInt(mouseDownX) + rightWidth - gutterSize; //左側(cè)最大分割值
                        var maxLW = parseInt(mouseDownX) - leftWidth + gutterSize; //右側(cè)最大分割值
                        var evCMX = parseInt(ev.clientX)
                        var newLeftWidth = leftWidth + (evCMX - parseInt(mouseDownX))
                        var newRightWidth = rightWidth + (parseInt(mouseDownX) - evCMX)
                        console.log(' 左側(cè)寬度 --->>> ', newLeftWidth);
                        console.log(' 右側(cè)寬度 --->>> ', newRightWidth);
                        document.getElementById("ls").innerHTML = newLeftWidth;
                        document.getElementById("rs").innerHTML = newRightWidth;
                        // 當(dāng)出現(xiàn)負(fù)數(shù)時(shí) or 超過允許的最大寬度時(shí)，不進(jìn)行賦值
                        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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容