鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局-阿里云开发者社区

鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局

2023-01-15 377

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局

1. 实现的效果如下图所示：

2. 思路

1. 使用定位在左侧菜单栏右侧写一个不可见div，鼠标经过鼠标指针样式变换

2. 监听事件：鼠标按下、抬起、移动，需要一个变量，来记录当前是按下还是抬起，初始为false，按下时为true，抬起时为false，如果是true的情况可以移动。

3.记录鼠标偏移值e.screenX，借此控制菜单栏宽度，使用min、maxwidth控制最小或最大宽度

4.性能优化，采用节流或防抖

3.代码

分为js和react两个版本，以供参考

3.1 js核心代码简单理解版：

  <div class="menu-wrapper">
    <div class="resize-bar"></div>
  </div>
  <div class="content"></div>
  <script>
    let resizing = false
    const menu = document.querySelector('.menu-wrapper')
    const resizeBar = document.querySelector('.resize-bar')
    // 监听： 当鼠标按下，变量设置为true表示已经按下
    resizeBar.addEventListener('mousedown', () => {
      resizing = true
    })
    // 监听：当鼠标移动，将鼠标的位置赋值给元素的宽度
    window.addEventListener('mousemove', (e) => {
      if (resizing) {
        e.preventDefault()
        e.stopPropagation()
        const { screenX } = e
        menu.style.width = screenX + 'px'
      }
    })
    // 监听：当鼠标抬起，变量设置为false表示已经抬起
    window.addEventListener('mouseup', () => {
      resizing = false;
    })
  </script>

3.2 实际应用-react版

结合flex左右布局，鼠标控制的是左侧 flex：0 0 200px 的宽度，以及设置最小和最大的宽度，使用节流方式优化性能

                           // 设置的不可见div
                            <div
                                className='resize-bar'
                                style={{
                                    width: "10px",
                                    height: "100%",
                                    minHeight: "4.6875rem",
                                    position: "absolute",
                                    top: "0",
                                    right: "0",
                                    cursor: "col-resize",
                                    zIndex: "999999999"
                                }}
                            ></div>
// react代码部分：
 setTimeout(() => {
        let prevCursorOffset = -1
        let resizing = false
        const menu: any = document.querySelector(".mouseDrag")
        const resizeBar: any = document.querySelector(".resize-bar")
        resizeBar.addEventListener("mousedown", () => {
            resizing = true
        })
        window.addEventListener("mousemove", handleResizeMenu) 
        window.addEventListener("mouseup", () => {
            resizing = false
        })
        function handleResizeMenu(e) {
            if (!resizing) {
                return
            }
            const {screenX} = e
            // 加上这两行代码，避免移动鼠标时选择界面元素
            e.preventDefault()
            e.stopPropagation()
            if (prevCursorOffset === -1) {
                prevCursorOffset = screenX
                // 鼠标偏移量大于50时执行一次大小调整
            } else if (Math.abs(prevCursorOffset - screenX) >= 50) {
                menu.style.flex = `0 0 ${screenX}px` // 设置左侧宽度
                menu.style.maxWidth = "500px" // 设置左侧最大宽度
                prevCursorOffset = screenX
            }
        }
    }, 1500)

4. 使用flex实现左右两栏式经典布局

好处：使用flex布局可以使右侧内容区域自适应

4.1 图示：

4.2 代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-左右布局</title>
    <style>
      .wrap {
        margin: 0 auto;
        width: 80%;
        display: flex;
      }
      #left {
        flex: 0 0 200px; /* 左侧固定200px */
        height: 500px;
        background: red;
      }
      #right {
        flex: 1; /* 随父级变化 */
        height: 500px;
        background: burlywood;
      }
    </style>
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right">右侧</section>
</div>
</body>
</html>