最近用vue做了一個小項目--可拖曳的樹狀結構圖。

結構通過Vue的遞歸組件實現

布局使用flex，結構線由CSS偽類實現

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

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

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

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

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

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

methods:{ dragstart(e,nodeObj){ console.log(’🐉drag移動的點位’,nodeObj.name,); let transData=JSON.stringify(nodeObj)//拖曳傳遞過去的數據先轉為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(’獲取了數據’,getData); } }

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

創建bus文件夾，新建index.js文件

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

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

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

ifFatherDragToSon(dragObj,dropObj){//判斷是否父節點移動到了子節點 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事件獲取狀態，為true直接return

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

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

代碼連接

以上就是vue 實現可拖曳的樹狀結構圖的詳細內容，更多關于vue 實現樹狀結構圖的資料請關注好吧啦網其它相關文章！