前端实现拖拽div修改宽度,用于菜单栏等多处场景

1、演示

2、 比较简单,直接上源码(内部有注释)

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
      #container {
        display: flex;
        height: 100vh;
      }
      #div1 {
        flex: 0 0 205px;
        min-width: 205px;
        max-width: 355px;
      }
      #div1,
      #div3 {
        background: lightblue;
        position: relative;
        /* border: solid 1px #000; */
      }
      #div3 {
        flex: 1;
        border: solid 1px #000;
      }
      #div2 {
        width: 5px;
        height: 100%;
        right: 0;
        top: 0;
        background-color: red;
        cursor: ew-resize;
        position: absolute;
        display: none;
        /* 悬停时的光标样式 */
      }
      #div1:hover #div2 {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="div1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci, blanditiis!
        <div id="div2"></div>
      </div>

      <div id="div3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium porro, aliquid voluptatem, architecto adipisci, sit in assumenda
        consectetur nisi est magnam magni veritatis dolorem. Laborum molestias quibusdam numquam dolore veritatis quam ab laudantium exercitationem
        aut ratione tempore dolorum impedit nihil, voluptates alias nostrum, nulla voluptatem ea voluptate. Unde consequuntur adipisci alias numquam
        culpa omnis possimus atque, et dicta illo eveniet eligendi. Aperiam distinctio ullam iure sint laudantium blanditiis, praesentium eligendi
        laborum, illum maiores autem magnam deserunt voluptas similique voluptates, dolor nesciunt hic cumque officia odio quae quidem? Error tenetur,
        voluptatem nulla iusto ullam impedit adipisci? Maiores error praesentium eaque accusamus!
      </div>
    </div>
  </body>
  <script>
    const container = document.getElementById('container')
    const div1 = document.getElementById('div1')
    const div2 = document.getElementById('div2')
    const div3 = document.getElementById('div3')
    console.log(div1, div2, div3)

    let startX = null
    let startWidth1 = null
    let startWidth3 = null
    div2.addEventListener('mousedown', function (e) {
      startX = e.clientX // 记录鼠标按下时的x坐标
      startWidth1 = div1.offsetWidth // 记录 div1 当前的宽度
      startWidth3 = div3.offsetWidth // 记录 div3 当前的宽度
      // 应用 ew-resize 光标样式到整个文档
      document.body.style.cursor = 'ew-resize'
      //   禁止拖拽时选中文本
      container.style.userSelect = 'none'

      document.addEventListener('mousemove', resize, false)
      document.addEventListener('mouseup', stopResize, false)
    })

    function resize(e) {
      const diffX = e.clientX - startX
      let newWidth1 = startWidth1 + diffX
      let newWidth3 = startWidth3 - diffX
      //   检查div1是否超出最小或最大宽度 并相应调整
      if (newWidth1 < 205) {
        newWidth1 = 205
      } else if (newWidth1 > 355) {
        newWidth1 = 355
      }

      //   因为div2是div1和div3之间的分隔条 所以需要更新div3的宽度
      // 以保持总体宽度不变 我们这里假设容器总宽度是不变的
      newWidth3 = container.offsetWidth - newWidth1 - div2.offsetWidth
      //   设置新宽度
      div1.style.flex = `0 0 ${newWidth1}px`
      div3.style.flex = `${newWidth3}px`
    }

    function stopResize() {
      document.body.style.cursor = ''
      container.style.userSelect = ''
      document.removeEventListener('mousemove', resize, false)
      document.removeEventListener('mouseup', stopResize, false)
    }
  </script>
</html>
相关推荐
帅夫帅夫23 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28132 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵44 分钟前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
每天开心1 小时前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架