vue實現(xiàn)多欄布局拖拽

更新時間：2021年09月08日 14:44:27 作者：你的小余童鞋

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多欄布局拖拽，改變盒子的寬度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)多欄布局拖拽的具體代碼，供大家參考，具體內(nèi)容如下

一、目標(biāo)

vue 實現(xiàn)多個盒子（用戶根據(jù)實際場景決定盒子數(shù)量）自由拖拽，改變寬度。

二、應(yīng)用場景

可自由拖動寬度的多欄布局。

最典型的案例：編輯器（eg:vscode,idea等）

三、組件設(shè)計

由于該組件盒子數(shù)量不確定，所以我們設(shè)計組件時參考了Vuetify中的Form和FormItem的設(shè)計。即：外層大盒子處理分發(fā)的拖拽事件，里層的盒子負(fù)責(zé)展示各個Item的內(nèi)容。

組件設(shè)計實現(xiàn)目標(biāo)：

<drag-box style="width: 100%; height: 100%;">
   <drag-item>item1</drag-item>
   <drag-item>item2</drag-item>
   <drag-item>item3</drag-item>
   <drag-item>item4</drag-item>
</drag-box>

四、實現(xiàn)

4.1 dragBox 靜態(tài)頁面

（通過插槽實現(xiàn)子元素的嵌套）

<template>
    <div ref='dragBox' style='display: flex; width: 100%; height: 100%;'>
        <slot></slot>
    </div>
</template>

4.2 dragItem 頁面

（通過插槽實現(xiàn)drag-item內(nèi)部元素的嵌套）

<template>
    <div ref="container" class="d-flex" style="min-width: 200px; position: relative;">
        <div style="width: 100%; height: 100%;">
            <slot>默認(rèn)信息</slot>
        </div>
  <!-- 拖拽條 -->
        <div v-if="resizeShow" class="resize" />
    </div>
</template>
<script>
export default {
  props: {
  // 控制拖拽條的是否顯示，默認(rèn)顯示
    resizeShow: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style>
.resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: #d6d6d6;
}
</style>

4.3 拖拽邏輯

拖拽的邏輯應(yīng)當(dāng)交給dragBox處理，而非dragItem。

4.3.1 在實現(xiàn)拖拽之前，應(yīng)當(dāng)給子元素（即：dragItem）進(jìn)行合理布局。

當(dāng)用戶未給 dragItem 分配初始寬度時，則默認(rèn)flex:1（平均分配剩余空間）。具體邏輯如下：

 // 如果dragItem 沒有定義寬度，則flex=1
    setDragItemFlex () {
      const dragBox = this.$refs.dragBox
      const childsLen = dragBox.children.length

      for (let i = 0; i < childsLen; i++) {
        const node = dragBox.children[i]
        if (!node.style.width) {
          // 如果沒有定義寬度，則flex=1
          node.style.flex = 1
        }
      }
    },

4.3.2 拖拽實現(xiàn)邏輯

應(yīng)當(dāng)為每個dragItem的拖動條添加拖動事件。完整的拖動事件包括：鼠標(biāo)按下，鼠標(biāo)移動，鼠標(biāo)抬起（拖動結(jié)束）。

循環(huán)為每個拖動條添加事件：

dragControllerDiv () {
  const resize = document.getElementsByClassName('resize') // 拖拽條
  // 循環(huán)為每個拖拽條添加事件
  for (let i = 0; i < resize.length; i++) {
    // 鼠標(biāo)按下事件
    resize[i].addEventListener('mousedown', this.onMouseDown)
  }
},

鼠標(biāo)按下邏輯：獲取鼠標(biāo)按下的初始位置，改變拖拽條顏色，添加move和up的監(jiān)聽事件。

onMouseDown (e) {
  this.resizeBox = e.target
  this.currentBox = this.resizeBox.parentNode// 當(dāng)前盒子
  this.rightBox = this.getNextElement(this.currentBox)// 當(dāng)前盒子的下個兄弟節(jié)點(diǎn)
  if (!this.rightBox) return
  this.curLen = this.currentBox.clientWidth
  this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的寬度
  // 顏色改變提醒
  this.resizeBox.style.background = '#818181'
  this.startX = e.clientX
  document.addEventListener('mousemove', this.onMousemove)
  document.addEventListener('mouseup', this.onMouseup)
},

// 獲取下一個兄弟元素的兼容函數(shù)
getNextElement (element) {
  if (element.nextElementSibling) {
    return element.nextElementSibling
  } else {
    var next = element.nextSibling// 下一個兄弟節(jié)點(diǎn)
    while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
      next = next.nextSibling
    }
    return next
  }
}

鼠標(biāo)移動事件：計算并設(shè)置當(dāng)前盒子和右側(cè)盒子的寬度。

onMousemove (e) {
  const endX = e.clientX
  const moveLen = endX - this.startX // （endx-startx）= 移動的距離
  const CurBoxLen = this.curLen + moveLen // resize[i].left+移動的距離=左邊區(qū)域最后的寬度
  const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右側(cè)寬度=總寬度-左側(cè)寬度-其它盒子寬度
  // 當(dāng)最小寬度時，無法繼續(xù)拖動
  if (CurBoxLen <= 200 || rightBoxLen <= 200) return
  this.currentBox.style.width = CurBoxLen + 'px'// 當(dāng)前盒子的寬度
  this.resizeBox.style.left = CurBoxLen // 設(shè)置左側(cè)區(qū)域的寬度
  this.rightBox.style.width = rightBoxLen + 'px'
},

鼠標(biāo)抬起事件：銷毀mousedown和mousemove事件；恢復(fù)拖拽條的顏色。

onMouseup () {
 // 顏色恢復(fù)
 this.resizeBox.style.background = '#d6d6d6'
 document.removeEventListener('mousedown', this.onMouseDown)
 document.removeEventListener('mousemove', this.onMousemove)
},

在mounted鉤子函數(shù)里添加對應(yīng)的事件。

mounted () {
  this.setDragItemFlex()
  this.dragControllerDiv()
},

引入并注冊使用該組件：

<template>
  <div id="app" style="width: 100%; height: 100vh; border:1px solid #ccc;">
    <drag-box style="width: 100%; height: 100%;">
      <drag-item style="width: 20%;">item1</drag-item>
      <drag-item>item2</drag-item>
      <drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item>
    </drag-box>
  </div>
</template>

<script>
import {DragBox, DragItem} from './components/dragLayouter'

export default {
  name: 'App',
  components: {
    DragBox,
    DragItem
  }
}
</script>