快捷導(dǎo)航

vue 實(shí)現(xiàn)可拖曳的樹(shù)狀結(jié)構(gòu)圖

更新時(shí)間：2021年04月12日 10:25:35 作者：YouKnow_HRT

這篇文章主要介紹了vue 實(shí)現(xiàn)可拖曳的樹(shù)狀結(jié)構(gòu)圖，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

Vue遞歸組件

結(jié)構(gòu)通過(guò)Vue的遞歸組件實(shí)現(xiàn)

布局使用flex，結(jié)構(gòu)線(xiàn)由CSS偽類(lèi)實(shí)現(xiàn)

需要注意的是居中布局，當(dāng)X軸元素過(guò)多導(dǎo)致子元素寬度超出視圖，元素居中后雖然有滾動(dòng)條，但只能到達(dá)右邊的內(nèi)容，左邊的內(nèi)容會(huì)無(wú)法訪(fǎng)問(wèn)，可以把父元素設(shè)置為inline-flex，寬度設(shè)置為auto。當(dāng)然，如果是上述的結(jié)構(gòu)則不會(huì)有這個(gè)問(wèn)題，但遇到大數(shù)據(jù)渲染，還是困擾我了一下午。

drag事件

首先在需要在拖動(dòng)的元素上綁定draggable屬性，除了<a>和<img>標(biāo)簽設(shè)默認(rèn)為true，其他元素都需要設(shè)置下

然后是三個(gè)事件dragend、dragover、drop(用Vue寫(xiě)的，就不在事件前加on了)

注意dragover需要去除默認(rèn)行為，在事件中給上$event.preventDefault()，否則拖曳時(shí)鼠標(biāo)會(huì)有🚫標(biāo)志，使拖動(dòng)無(wú)效。

drag的元素把值傳到drop的位置，需要使用$event.dataTransfer.setData("node", transNodeData)

"node"是相當(dāng)于傳遞數(shù)據(jù)的變量名，需要先JSON.stringify()

methods:{
    dragstart(e,nodeObj){
      console.log('🐉drag移動(dòng)的點(diǎn)位',nodeObj.name,);
      let transData=JSON.stringify(nodeObj)//拖曳傳遞過(guò)去的數(shù)據(jù)先轉(zhuǎn)為JSON格式
      e.dataTransfer.setData("node",transData)
    },
    dragover(e){
      e.preventDefault()
    },
    drop(e,nodeObj){
      console.log('🐉drop到的點(diǎn)位',nodeObj.name);
      let getData=JSON.parse( e.dataTransfer.getData("node"))
      console.log('獲取了數(shù)據(jù)',getData);
    }
  }

了解了這一點(diǎn)，接下來(lái)要做的就是把獲取的拖曳點(diǎn)位數(shù)據(jù)放到放置點(diǎn)位的children數(shù)組中，并在dragend事件中把拖曳點(diǎn)位在父節(jié)點(diǎn)children數(shù)組中刪除，節(jié)點(diǎn)的索引在dragstart事件觸發(fā)時(shí)就獲取，并通過(guò)eventBus這一組件通信方式傳遞給dragend(也可以使用Vuex)。

創(chuàng)建bus文件夾，新建index.js文件

import Vue from "vue"
const busEvent= new Vue({
  data(){
    return{
      dragNodeIndex:-1,//拖曳節(jié)點(diǎn)在父節(jié)點(diǎn)children數(shù)組中的index
    }
  },
  created(){
    this.$on("transDragNodeIndex", res=>{//通過(guò)$on來(lái)監(jiān)聽(tīng)$emit,需要確保自定義事件在觸發(fā)前被監(jiān)聽(tīng)，也就是訂閱先于發(fā)布，否則無(wú)法監(jiān)聽(tīng)到數(shù)據(jù)，我eventBus沒(méi)怎么用過(guò)，這算是個(gè)坑
      this.dragNodeIndex=res
    })
  }
})

export default busEvent

在組件中引入eventBus，此時(shí)在dragstart中通過(guò)$emit觸發(fā)自定義事件后，$on就可以接收到這個(gè)數(shù)據(jù)，在dragend中，可以通過(guò)eventBus獲取這一索引，然后在數(shù)組中刪除

接下來(lái)就是做一些邏輯判斷，例如父節(jié)點(diǎn)不能拖曳到子節(jié)點(diǎn)，先通過(guò)遞歸方式把父節(jié)點(diǎn)上所有子節(jié)點(diǎn)的name遍歷進(jìn)一個(gè)數(shù)組，如果drop位置的name在數(shù)組中就表明父到子了，設(shè)置狀態(tài)為true，

ifFatherDragToSon(dragObj,dropObj){//判斷是否父節(jié)點(diǎn)移動(dòng)到了子節(jié)點(diǎn)
      if (dragObj.children.length === 0) return false;
      let newArr = [];
      function getAllName(dragObj) {
        newArr.push(...dragObj.children);
        if (dragObj.children.length === 0) {
          return;
        } else {
          for (let i = 0; i < dragObj.children.length; i++) {
            getAllName(dragObj.children[i]);
          }
        }
      }
      getAllName(dragObj);
      if (newArr.includes(dropObj)) {
        return true;
      }
      return false;
    }

通過(guò)eventBus讓dragend事件獲取狀態(tài)，為true直接return

拖曳到自身也不行，直接return。特意在拎壺沖點(diǎn)位下加了個(gè)子節(jié)點(diǎn)，主要就是為了驗(yàn)證通過(guò)節(jié)點(diǎn)在棧中的地址來(lái)判斷，而不是依據(jù)name屬性

再一個(gè)就是提一下drag事件中的$event.dataTransfer.dropEffect，可以獲取的值為move、copy、none、link，下圖中當(dāng)dropEffect為🚫時(shí)拖曳點(diǎn)位消失了，其實(shí)就是執(zhí)行了dragend事件中的代碼，而drop事件中的代碼未執(zhí)行，所以這一步需要先做流程控制。另外說(shuō)明，不同瀏覽器的默認(rèn)dropEffect也是不同的，比如360瀏覽器。