vue實(shí)現(xiàn)可拖拽div大小的方法

更新時(shí)間：2022年04月08日 10:51:10 作者：Uncle_MrLee

這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

下面看下vue中可拖拽div大小的方法。

可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins）

方法：

參數(shù)：

1.allBox：最外層第div class；
2.leftBox：最左層第div class；
3.resizeBox：中間div class；
4.rightBox：最右層第div class；
leftMin /rightMin 距離左右2側(cè)最小距離；
leftBox，resizeBox，rightBox設(shè)置寬度均需float;

*若是在內(nèi)部容器中，須在最外層添加position: relative,否則會引起跳動，計(jì)算距離錯誤

dragDiv(allBox, leftBox, resizeBox, rightBox, leftMin = 200, rightMin = 200) {
? ? ? ? ?var box = document.getElementsByClassName(allBox);
? ? ? ? ?var left = document.getElementsByClassName(leftBox);
? ? ? ? ?var resize = document.getElementsByClassName(resizeBox);
? ? ? ? ?var right = document.getElementsByClassName(rightBox);
? ? ? ? ?for(let i = 0; i < resize.length; i++) {
? ? ? ? ? ? // 鼠標(biāo)按下事件
? ? ? ? ? ? resize[i].onmousedown = function(e) {
? ? ? ? ? ? ? ?// 顏色改變提醒
? ? ? ? ? ? ? ?resize[i].style.background = '#818181';
? ? ? ? ? ? ? ?var startX = e.clientX;
? ? ? ? ? ? ? ?resize[i].left = resize[i].offsetLeft;
? ? ? ? ? ? ? ?// 鼠標(biāo)拖動事件
? ? ? ? ? ? ? ?document.onmousemove = function(e) {
? ? ? ? ? ? ? ? ? var endX = e.clientX;
? ? ? ? ? ? ? ? ? var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移動的距離。resize[i].left+移動的距離=左邊區(qū)域最后的寬度
? ? ? ? ? ? ? ? ? var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器寬度 - 左邊區(qū)域的寬度 = 右邊區(qū)域的寬度
? ? ? ? ? ? ? ? ? if(moveLen < leftMin) moveLen = leftMin;
? ? ? ? ? ? ? ? ? if(moveLen > maxT - rightMin) moveLen = maxT - rightMin;
? ? ? ? ? ? ? ? ? resize[i].style.left = moveLen; // 設(shè)置左側(cè)區(qū)域的寬度
? ? ? ? ? ? ? ? ? for(let j = 0; j < left.length; j++) {
? ? ? ? ? ? ? ? ? ? ?left[j].style.width = moveLen + 'px';
? ? ? ? ? ? ? ? ? ? ?right[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ?// 鼠標(biāo)松開事件
? ? ? ? ? ? ? ?document.onmouseup = function(evt) {
? ? ? ? ? ? ? ? ? // 顏色恢復(fù)
? ? ? ? ? ? ? ? ? resize[i].style.background = '#d6d6d6';
? ? ? ? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? ? ? ? document.onmouseup = null;
? ? ? ? ? ? ? ? ? resize[i].releaseCapture && resize[i].releaseCapture(); // 當(dāng)你不在需要繼續(xù)獲得鼠標(biāo)消息就要應(yīng)該調(diào)用ReleaseCapture()釋放掉
? ? ? ? ? ? ? ?resize[i].setCapture && resize[i].setCapture(); // 該函數(shù)在屬于當(dāng)前線程的指定窗口里設(shè)置鼠標(biāo)捕獲
? ? ? ? ? ? ? ?return false;
? ? ? ? ? ? };
? ? ? ? ?}
? ? ? },

補(bǔ)充：vue中的可拖拽寬度div

主要思路

在需要拖拽寬度的區(qū)域設(shè)置一個(gè)div，高度設(shè)為 100%，寬度盡量窄一些(也不要太窄，3～6px左右)
在此div上綁定當(dāng)“鼠標(biāo)按下”時(shí)，觸發(fā)document綁定“鼠標(biāo)移動”方法和"鼠標(biāo)抬起"方法
通過鼠標(biāo)移動方法不斷獲取當(dāng)前鼠標(biāo)位置，設(shè)置需要變化大小div的寬高。
鼠標(biāo)抬起時(shí)取消鼠標(biāo)移動方法和鼠標(biāo)抬起方法的綁定。

<template>
  <div class="container" id="content_box">
    <div class="tab">左側(cè)Tab</div>
    <div class="menu" ref="menu">
      左側(cè)菜單
      <div class="menu-resize" ref="menuResize"></div>
    </div>
    <div class="content">
      中心區(qū)域
      <div class="opera" ref="opera">
        <div class="opera-resize" ref="operaResize"></div>
        操作區(qū)域
      </div>
  </div>
</template>
<script>
export default {
  name: "dropWidth",
  mounted() {
    this.$nextTick(() => {
      this.dropSize();
    })
  },
  methods: {
    dropSize() {
      let that = this,
          menuWidth = 200,
          operaHeight = 200;
      this.$refs.menuResize.onmousedown = function () {
        document.onmousemove = function (e) {
          let clientX = e.clientX;
          // 最大寬度
          if(clientX>=330){
            clientX = 330;
          }
          // 最小寬度
          if(clientX<=230){
            clientX = 230;
          // TODO 這里減的是最左側(cè)tab的寬度
          menuWidth = clientX - 30;
          that.$refs.menu.style.width = clientX - 30 +"px";
        }
        document.onmouseup = function () {
          console.log('當(dāng)前寬度', menuWidth);
          document.onmousemove = null;
          document.onmouseup = null;
          that.releaseCapture && that.releaseCapture()
      }
      this.$refs.operaResize.onmousedown = function () {
          let clientY = e.clientY;
          console.log(clientY)
          if(clientY<=100){
            clientY = 100;
          if(clientY>=300){
            clientY = 300;
          operaHeight = clientY;
          // TODO 這里需要取反向
          that.$refs.opera.style.height = 400 - clientY +"px";
          console.log('當(dāng)前寬度', operaHeight);
    }
  }
}
</script>
<style scoped>
.container {
  width: 1000px;
  height: 400px;
  border: 2px solid #dddddd;
  display: flex;
  justify-content: center;
.tab {
  width: 30px;
  height: 100%;
  background-color: #EC8C32;
  flex-shrink: 0;
  flex-grow: 0;
.menu {
  width: 200px;
  background-color: #AAB6E0;
  position: relative;
.content {
  width: 100%;
.opera {
  height: 200px;
  position: absolute;
  bottom: 0;
  background-color: #F2BE25;
.menu-resize {
  width: 5px;
  top: 0;
  right: 0;
  cursor: col-resize;
.opera-resize {
  height: 5px;
  left: 0;
  cursor: row-resize;
</style>

實(shí)現(xiàn)效果

請?zhí)砑訄D片描述