前端实现拖拽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>
相关推荐
F2E_Zhangmo13 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360230 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript