vue 實現(xiàn)可拖曳的樹狀結構圖

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

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

Vue遞歸組件

結構通過Vue的遞歸組件實現(xiàn)

布局使用flex，結構線由CSS偽類實現(xiàn)

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

drag事件

首先在需要在拖動的元素上綁定draggable屬性，除了<a>和<img>標簽設默認為true，其他元素都需要設置下

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

注意dragover需要去除默認行為，在事件中給上$event.preventDefault()，否則拖曳時鼠標會有🚫標志，使拖動無效。

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

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

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

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

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

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

export default busEvent

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

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

ifFatherDragToSon(dragObj,dropObj){//判斷是否父節(jié)點移動到了子節(jié)點
      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;
    }

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

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

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