前端实现拖拽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>
相关推荐
拉不动的猪几秒前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy42 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端