精拖动盒子边框,实现改变盒子宽度布局

思路:

1. 封装一个函数,传递一个方位,判断需要在那个方位鼠标按下拖动,拖动的边框要显示一个提示线 (5px的盒子)
2. 函数接受到方位字段,创建一个div(提示线),显示在传递的方位边框上,鼠标经过显示出颜色
3. 鼠标按下后记录下按下的位置 pageX 同时在鼠标按下事件里面定义鼠标拖动事件,判断传递方位的字段是 left 那么就用按下的位置减去拖动后的位置如果是right那么就相反.为什么相反呢?
4. 因为左边的边框向左拖动是增加,右边的边框向左拖动是减少
5. 得到拖动后的距离然后加上鼠标拖动之前的距离就可以实现此功能了

左右拖动代码实现 : 

Html部分

<div class="main">
        <div class="left">
            <div>组件区域</div>
        </div>
        <div class="content">
            <div style="width: 1000px;">内容</div>
        </div>
        <div class="right">
            <div>属性区域</div>
        </div>
    </div>

css部分 :

.main {
            display: flex;
        }

        .main .left {
            flex-shrink: 0;
            width: 300px;
            height: 600px;
            border: 1px solid #ccc;
            position: relative;
        }

        .main .content {
            height: 600px;
            background-color: #eee;
            overflow: auto;
        }

        .main .right {
            flex-shrink: 0;
            width: 400px;
            height: 600px;
            border: 1px solid #ccc;
            position: relative;
        }

        /*拖拽区div样式*/
        .resize {
            cursor: e-resize;
            position: absolute;
            top: 0;
            /* left: 0; */
            width: 5px;
            height: 100%;
            z-index: 999;
            font-size: 32px;
            color: white;
            user-select: none;
        }

        .resize.active {
            background-color: #0090f1;
        }

        .resize:hover {
            background-color: #0090f1;
        }

        .main {
            width: 1600px;
            margin: 0 auto;
        }

        /* .resizeTop {
            cursor: e-resize;
            position: absolute;
            top: 0;
            height: 5px;
            width: 100%;
            z-index: 999;
            font-size: 32px;
            color: white;
            user-select: none;
        }

        .resizeTop:hover {
            background-color: #0090f1;
        } */

JS部分 : 

let right = document.querySelector('.right')
        resizeFn(right, 'top')

        let left = document.querySelector('.left')
        resizeFn(left, 'right') // 选择左边还是右边拖动

        function resizeFn(element, position) {
            let resize = element.querySelector('.resize')
            if (!resize) {
                // 添加HTML内容与文本内容以前用的是innerHTML与innerText方法，
                // 最近发现还有insertAdjacentHTML和 insertAdjacentText方法，
                // 这两个方法更灵活，可以在指定的地方插入html内容和文本内容。

                // 1.     beforeBegin: 插入到标签开始前
                // 2.     afterBegin: 插入到标签开始标记之后
                // 3.     beforeEnd: 插入到标签结束标记前
                // 4.     afterEnd: 插入到标签结束标记后
                // if (position === 'top') {
                //     element.insertAdjacentHTML('afterbegin', '<div class="resizeTop" title="收缩侧边栏"></div>')
                //     resize = element.querySelector('.resizeTop')
                // } else {
                    element.insertAdjacentHTML('afterbegin', '<div class="resize" title="收缩侧边栏"></div>')
                    resize = element.querySelector('.resize')
                // }

            }
            resize.style[position] = '0'
            // mousedown : 鼠标按下
            resize.addEventListener('mousedown', function (e) {
                let startX = e.pageX  // 按下的位置
                console.log(e.pageX)
                let width = element.offsetWidth // 按下时候盒子的宽度
                resize.classList.add('active') // 添加类名
                document.addEventListener('mousemove', move) // mousemove : 鼠标移动事件
                let timer = null
                function move(e) {
                    let moveX // 左右这里切换计算顺序即可
                    if (position === 'left') moveX = startX - e.pageX  // 减去拖动之后的位置
                    if (position === 'right') moveX = e.pageX - startX
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        element.style.width = (width + moveX) + 'px'  // 按下时候盒子的宽度加上拖动的距离
                    }, 5);
                }
                // mouseup : 鼠标松开
                document.addEventListener('mouseup', function () {
                    document.removeEventListener('mousemove', move)
                    resize.classList.remove('active')
                }, { once: true })
            })
        }

上下拖动的不想写了,偷个懒,其实和上面思路一样.

感觉不错的话可以讨论讨论点点关注