拖动侧边栏改变div宽度

使用了两栏布局， 触发BFC 占完剩下宽度

这里复习一下，两栏布局：

1，float BFC 

2, 绝对定位

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

3，css计算属性 calc(100% - 30%)

4, flex

 

整体思路
（1）按下鼠标时，获取当前点击位置距离当前body的位置
（2）移动该鼠标时，计算左边div的距离，
计算公式是 = 原先左边div的距离 + 最后鼠标的位置 - 起始鼠标的位置
（3）在容错处理上，设置了可移动的最大距离，防止宽度溢出。

 

另外拓展的知识点：DOM事件

clientX,clientY 鼠标位置
offsetWidth width + padding + border
offsetLeft 左侧距离浏览器的距离
clientWidth width + padding

 

    <style>
        * {
            padding: 0;
            margin: 0
        }

        html,
        body {
            width: 100%;
            height: 100vh;
        }

        #box {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            user-select: none;
        }

        #left {
            width: calc(30% - 5px);
            height: 100%;
            float: left;
            overflow: auto;
            background: pink;
        }

        #resize {
            position: relative;
            width: 5px;
            height: 50px;
            background-color:brown;
            cursor: w-resize;
            float: right;
        }

        #right {
            height: 100%;
            background: brown;
        }
    </style>

html

<div id="box">
        <div id="left"> 左边的div
            <svg width="100%" id="controllerSvg"></svg>
            <div id="resize"></div>
        </div>
        <div id="right" style="border-top: 1px solid #b5b9a9; ">右边的div
        </div>
    </div>

js

 <script>
        let left =  document.getElementById('left')
        let right = document.getElementById('right')
        let box = document.getElementById('box')
        let resize = document.getElementById('resize')
        resize.onmousedown = function (e) {
            let startX = e.clientX
            resize.left = left.offsetWidth

            document.onmousemove = function(e) {
                console.log(1)
                let endX =  e.clientX
                let mLen = resize.left + ( endX - startX)
                let maxT = box.clientWidth - resize.offsetWidth
                if(mLen<=200)  {
                    mLen = 200
                }
                left.style.width = mLen + 'px'
            }
            document.onmouseup = function() {
                document.onmousemove = null
            }
        }
    </script>