1.jpg

公共js部分(一共寫了三種蝇棉，其它的不管是多少都可以跟著這個來寫)

因為代碼比較多所以建立一個公共的js文件，封裝在里面澜倦，然后在頁面里面引入

// 兩列拖動改變兩列寬度
export function dragTwoColDiv(contentId,leftBoxId,resizeId,rightBoxId){
  let resize = document.getElementById(resizeId);
  let leftBox = document.getElementById(leftBoxId);
  let rightBox = document.getElementById(rightBoxId);
  let box = document.getElementById(contentId);
    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 = 150;
        if (moveLen > maxT - 150) moveLen = maxT - 150;
        resize.style.left = moveLen;
        leftBox.style.width = moveLen + 'px';
        rightBox.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;
    }
}
// 三列拖動改變div寬度
export function dragThreeColDiv(contentId,leftBoxId,resizeOne,centerBoxId,resizeTwo,rightBoxId) {
  let resizeO = document.getElementById(resizeOne);
  let resizeT = document.getElementById(resizeTwo);
  let leftBox = document.getElementById(leftBoxId);
  let rightBox = document.getElementById(rightBoxId);
  let centerBox = document.getElementById(centerBoxId);
  let box = document.getElementById(contentId);
    resizeO.onmousedown = function (e) {
      let startX = e.clientX;
      resizeO.left = resizeO.offsetLeft;
      document.onmousemove = function (e) {
        let endX = e.clientX;
        let rightW = rightBox.offsetWidth;
        let moveLen = resizeO.left + (endX - startX);
        let maxT = box.clientWidth - resizeO.offsetWidth;
        if (moveLen < 150) moveLen = 150;
        if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;
        resizeO.style.left = moveLen;
        leftBox.style.width = moveLen + 'px';
        centerBox.style.width = (box.clientWidth - moveLen - rightW - 10) + 'px';
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        resizeO.releaseCapture && resizeO.releaseCapture();
      }
      resizeO.setCapture && resizeO.setCapture();
      return false;
    }
    resizeT.onmousedown = function (e) {
      let startX = e.clientX;
      resizeT.left = resizeT.offsetLeft;
      document.onmousemove = function (e) {
        let endX = e.clientX;
        let leftW = leftBox.offsetWidth;
        let moveLen = resizeT.left + (endX - startX) - leftW;
        let maxT = box.clientWidth - resizeT.offsetWidth - 5;
        if (moveLen < 150) moveLen = 150;
        if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;
        resizeT.style.left = moveLen;
        centerBox.style.width = moveLen + 'px';
        rightBox.style.width = (box.clientWidth - moveLen - leftW - 10) + 'px';
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        resizeT.releaseCapture && resizeT.releaseCapture();
      }
      resizeT.setCapture && resizeT.setCapture();
      return false;
    }

}
// 上下拖動改變上下兩個模塊的高度
export function dragTwoRowDiv(contentId,topBoxId,resizeId,downBoxId){
  let resize = document.getElementById(resizeId);
  let topBox = document.getElementById(topBoxId);
  let downBox = document.getElementById(downBoxId);
  let box = document.getElementById(contentId);
  resize.onmousedown = function (e) {
    let startY = e.clientY;
    resize.top = resize.offsetTop;
    document.onmousemove = function (e) {
      let endY = e.clientY;
      let moveLen = resize.top + (endY - startY);
      let maxT = box.clientHeight - resize.offsetHeight;
      if (moveLen < 100) moveLen = 100;
      if (moveLen > maxT - 100) moveLen = maxT - 100;
      resize.style.top = moveLen;
      topBox.style.height = moveLen + "px";
      downBox.style.height = (box.clientHeight - moveLen - 5) + "px";
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture();
    }
    resize.setCapture && resize.setCapture();
    return false;
  }
}

vue部分

<template>
  <div class="all">
  <!-- 左右兩行拖動 -->
  <div class="drag-main">
    <h2>兩列的左右拖動改變div大小</h2>
      <div id="twoBox" class="drag-two-box">
        <div id="twoleft" class="drag-two-left">左</div>
        <div id="tworesize" class="drag-two-resize"></div>
        <div id="tworight" class="drag-two-right">右</div>
      </div>
    </div>
    <!-- 左右三行拖動 -->
    <div class="drag-main">
      <h2>三列的左右拖動改變div大小</h2>
      <ul id="contentId" class="content">
        <li id="leftId" class="left">左</li>
        <li id="resizeOne" class="l-resize"></li>
        <li id="centerId" class="center">中</li>
        <li id="resizeTwo" class="l-resize"></li>
        <li id="rightId" class="right">右</li>
      </ul>
    </div>
    <!-- 兩行上下拖動 -->
    <div class="drag-main">
       <h2>兩行的上下拖動改變div大小</h2>
      <div id="mainId" class="main">
        <div id="topBoxId" class="topBox">
          中上
        </div>
        <div id="resizeId" class="r-resize"></div>
        <div id="downBoxId" class="downBox">
          中下
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dragTwoColDiv, dragThreeColDiv, dragTwoRowDiv } from "@/xxxxx";
export default {
  data() {
    return {};
  },
  mounted() {
    dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    dragThreeColDiv("contentId","leftId","resizeOne","centerId","resizeTwo","rightId");
    dragTwoRowDiv("mainId", "topBoxId", "resizeId", "downBoxId");
  }
};
</script>

css 部分

<style lang="scss" scoped>
/*兩列 */
#twoBox {
  display: flex;
}
#twoleft {
  width: calc(20% - 10px);
}
#tworesize {
  width: 5px;
  cursor: w-resize;
}
#tworight {
  width: 80%;
}
/* 三列 */
#contentId {
  display: flex;
}
#leftId {
  width: calc(20% - 10px);
}
#resizeOne {
  width: 5px;
  cursor: w-resize;
}
#centerId {
  width: 60%;
}
#resizeTwo {
  width: 5px;
  cursor: w-resize;
}
#rightId {
  width: 20%;
}

/* 兩橫 */
#mainId {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#topBoxId {
  height: calc(80% - 5px);
}
#resizeId {
  height: 5px;
  cursor: s-resize;
}
#downBoxId {
  height: 20%;
}
// 輔助修飾
.all {
  padding: 30px;
  list-style: none;
}
.drag-main{
  margin-bottom: 30px;
  h2{
    margin-bottom: 30px;
  }
}
.drag-two-box {
  // width: 100%;
  display: flex;
  .drag-two-left {
    background: #1ee3aa;
    height: 100px;
  }
  .drag-two-right {
    background: #eb77eb;
  }
  .drag-two-resize {
    width: 5px;
    cursor: w-resize;
    background: #000;
  }
}

ul.content {
  // width:100%;
  display: flex;
  overflow: hidden;
  li {
    // float: left;
    height: 100px;
    list-style-type: none;
  }
  .left {
    background: red;
  }
  .center {
    background: #16ffa6;
    padding: 30px;
    box-sizing: border-box;
  }
  .right {
    background: orange;
  }
  .l-resize {
    background: #000;
  }
}
.main {
  height: 300px;
  .topBox {
    background: #1ee3aa;
  }
  .r-resize {
    background: #000;
  }
  .downBox {
    background: #eb77eb;
  }
}
</style>