拖动侧边栏改变div宽度

最新推荐文章于 2024-07-31 15:21:20 发布

奋斗的蜗牛，奔跑吧

最新推荐文章于 2024-07-31 15:21:20 发布

阅读量915

点赞数 2

分类专栏： vue 文章标签： HTML布局拖拽宽度调整 JavaScript SVG

原文链接：https://blog.csdn.net/qq_39295665/article/details/99622493

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

任务描述

实现左右拖拽布局功能：当拖动分割线时，可以重置左右两侧模块宽度实现宽度自定义。

首先搞清楚几个值的概念
（1）clientX
clientX：鼠标点击时位置距离当前body可视区域的x坐标

（2）left
相对于具有定位属性(position定义为relative)的父对象的左边距

（3）offsetLeft 与 offsetWidth
offsetLeft：当前元素距父元素左侧的值
offsetWidth: 元素的width+元素的padding+边框的宽度

（这部分网上有很多图示详解，不懂得可以去学习一下）

整体思路
（1）按下鼠标时，获取当前点击位置距离当前body的位置
（2）移动该鼠标时，计算左边div的距离，
计算公式是 = 原先左边div的距离 + 最后鼠标的位置 - 起始鼠标的位置
（3）在容错处理上，设置了可移动的最大距离，防止宽度溢出。

<template>
  <div id="box">
    <div class="top">顶部导航</div>
    <div id="left"> 左边的div
      <svg width="100%" id="controllerSvg" ></svg>
    </div>
    <div id="resize"></div>
    <div id="right" style="border-top: 1px solid #b5b9a9; ">右边的div
<!--      <svg width="100%" height="auto" id="serverSvg" ></svg>-->
    </div>
    <p></p>
  </div>
</template>

<script>
export default {
  name: 'change',
  methods: {
    dragControllerDiv: function () {
      let resize = document.getElementById('resize')
      let left = document.getElementById('left')
      let right = document.getElementById('right')
      let box = document.getElementById('box')

      resize.onmousedown = function (e) {
        let startX = e.clientX
        resize.left = resize.offsetLeft
        document.onmousemove = function (e) {
          let endX = e.clientX
          let moveLen = resize.left + (endX - startX)
          let maxT = box.clientWidth - resize.offsetWidth
          if (moveLen < 150) moveLen = 360
          if (moveLen > maxT - 800) moveLen = maxT - 800
          resize.style.left = moveLen
          left.style.width = moveLen + 'px'
          right.style.width = (box.clientWidth - moveLen - 5) + 'px'
        }
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
          resize.releaseCapture && resize.releaseCapture()
        }
        resize.setCapture && resize.setCapture()
        return false
      }
    }
  },
  mounted () {
    this.dragControllerDiv()
  }
}
</script>

<style scoped>
  #box{
    width:100%;
    height:400px;
    position: relative;
    overflow:hidden;
  }
  .top {
    width: 100%;
    height: 80px;
    background: #ffe0c6;
  }
  #left{
    width:calc(30% - 5px);
    height: 100%;
    float:left;
    overflow: auto;
    background: pink;
  }

  #resize{
    position: relative;
    width:5px;
    height:100%;
    cursor: w-resize;
    float:left;
  }

  #right{
    width:70%;
    height:100%;
    float:left;
    overflow: hidden;
    background: #ffc5c1;
  }
</style>

转载：https://blog.csdn.net/qq_39295665/article/details/99622493