vue 拖动调整左右两侧div的宽度

古城微笑少年丶 2023-06-01 12:41 79阅读 0赞

原文链接：[https://www.cnblogs.com/layaling/p/11009570.html][https_www.cnblogs.com_layaling_p_11009570.html]

原文是左中右三种情况的拖动。由于项目需要，我删除掉了右边的，直接左右区域拖动调整div宽度

**1、拖动，调整左右两侧宽度**

![1103120-20190929090937813-1109536485.png][]

<template>
      <div class="wid100 hig100">
        <ul class="box" ref="box">
          <li class="left" ref="left">西瓜</li>
          <li class="resize" ref="resize"></li>
          <li class="mid" ref="mid">备注2</li>
        </ul>
        <ul class="box" ref="box">
          <li class="left" ref="left">西瓜</li>
          <li class="resize" ref="resize"></li>
          <li class="mid" ref="mid">备注2</li>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Dashboard',
        mounted () {
          this.dragControllerDiv();
        },
        methods: {
          dragControllerDiv: function () {
            var resize = document.getElementsByClassName('resize');
            var left = document.getElementsByClassName('left');
            var mid = document.getElementsByClassName('mid');
            var box = document.getElementsByClassName('box');
            for (let i = 0; i < resize.length; i++) {
              // 鼠标按下事件
              resize[i].onmousedown = function (e) {
                var startX = e.clientX;
                resize[i].left = resize[i].offsetLeft;
                // 鼠标拖动事件
                document.onmousemove = function (e) {
                  var endX = e.clientX;
                  var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                  var maxT = box[i].clientWidth - resize[i].offsetWidth;  // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
    
                  if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为150px
                  if (moveLen > maxT - 150) moveLen = maxT  - 150;  //右边区域最小宽度为150px
    
                  resize[i].style.left = moveLen; // 设置左侧区域的宽度
    
                  for (let j = 0; j < left.length; j++) {
                    left[j].style.width = moveLen + 'px';
                    mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
                  }
                }
                // 鼠标松开事件
                document.onmouseup = function (evt) {
                  document.onmousemove = null;
                  document.onmouseup = null;
                  resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                }
                resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
                return false;
              }
            }
    
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      ul,li{
        list-style: none;
        display: block;
        margin:0;
        padding:0;
      }
      .box{
        width:100%;
        height: 48%;
        margin: 1% 0px;
        overflow:hidden;
      }
      .left{
        width:calc(30% - 10px);
        height:100%;
        background:#c9c9c9;
        float:left;
      }
      .resize{
        width:5px;
        height:100%;
        cursor: w-resize;
        float:left;
      }
      .mid{
        float:left;
        width:70%;
        height:100%;
        background:#f3f3f3;
      }
    </style>

转载于:https://www.cnblogs.com/luoxuemei/p/11605893.html

[https_www.cnblogs.com_layaling_p_11009570.html]: https://www.cnblogs.com/layaling/p/11009570.html
[1103120-20190929090937813-1109536485.png]: /images/20230601/e5de92d6f1da4bd0bfb4db89db408b6d.png