前端实现拖拽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>
相关推荐
Summer不秃3 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰7 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye14 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm16 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x42 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚44 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap2 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图