前端开发攻略---简易前端拖拽：轻松定制宽度，打造多功能菜单栏

bbamx.

已于 2024-04-11 13:31:38 修改

阅读量323

点赞数 3

分类专栏：前端开发攻略文章标签：前端

于 2024-04-07 13:59:35 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/137461690

版权

前端开发攻略专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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>