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

Bertha 。 2023-09-27 13:32 114阅读 0赞

**目录**

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

2. 思路

3.代码

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

3.2 实际应用-react版

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

4.1 图示：

4.2 代码实例：

--------------------

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

![a12164e260c7491eb6fb3e3615940194.gif][]

--------------------

### 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 图示： ####

![a9da16bb01054440a5047ba9d4b69f70.png][]

--------------------

#### 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>

[a12164e260c7491eb6fb3e3615940194.gif]: https://img-blog.csdnimg.cn/a12164e260c7491eb6fb3e3615940194.gif
[a9da16bb01054440a5047ba9d4b69f70.png]: https://img-blog.csdnimg.cn/a9da16bb01054440a5047ba9d4b69f70.png