產品的需求千奇百怪，在成長中的產品的需求更是。最怕的是到處抄，然后四不像，苦了開發人員了。

話說我們需要一棵樹，這個樹上有中間節點（文件夾）和葉子節點。然后這些數據會來自兩個系統，代表的含義也不相同，就這樣優秀沒有辦法，這都不是事。事情是支持某些文件夾下的節點（包括子中間節點和葉子節點）能拖放到另外一些節點里面，這也不是事，el-tree能支持。可怕的就是，一些拖放是刪除源節點的操作，就像移動操作；另一些拖放是保留源節點的操作，就像在目標節點下創建了副本，哈哈，就是這么有意思:(

刪除源的移動是el-tree本來就支持的，我們今天要說的是保留源的拖放。其實我這里能在不修改element-ui源碼的情況下實現這個功能真的說算是限制了一些事情，如果跟我的需求不一樣的，這種方法還是不能用的，一句話就是場景不符合。我的一些假定：

只支持inner類型的拖放，如果不知道我在說什么，說明你沒來對地方，inner是el-tree支持的三種拖放類型之一，它們是inner、prev、next，意思對，關鍵字對不對我也不想再去查了，文檔上有

節點是懶加載，即設置了lazy

我的實現方案是，在需要保留源節點的情況下，在node-drag-over事件里面把el-tree實例中的dragState.dropType改成’none’，因為我發現在drop事件里面，會根據dropType來做相應的操作，如果是none，則不會把源節點刪除，也不會把源節點插入目標節點。none這個類型是為了處理上面三種類型之外的操作做的，其實就是不做任何的拖放操作，我在實際中模擬出了這種場景，就是把元素拖出去走一圈，然后再回到原位置。

... handleNodeDragOver(draggingNode, dropNode, type) {... // 判斷是否要保留源節點，然后才執行下面的語句this.$refs.tree.dragState.dropType = 'none'; } ...

如果dropType是node的話，不會觸發node-drop事件，這樣我們其實是不能知道最后的拖放操作的。那么怎么辦呢？雖然沒有node-drop事件，但是它會觸發node-drag-end事件，只能把邏輯寫在這里了，不過要判斷是否是需要保留源節點的情況，然后才去做事情。

handleNodeDragEnd(draggingNode, dropNode, type) {... // 判斷是否需要保留源節點// 巴拉巴拉}

也就是說drop-node和一部分node-drap-end我都認為是最終的操作了。這里我會調用接口告知后端需要移動節點了，后端會把數據落庫，然后我需要在接口返回后重新加載目標節點，其實我并沒有都重新加載，我是判斷如果目標節點已經展開了才去加載，否則還讓它保持collapse狀態，也就是啥也不動。

好了實現思路也就是這樣，現在為止基本滿足了需求，項目還在開發中，后面如果遇到了問題，我會再進行更新的。我還要再說一下，我這里的處理方式并不一定能適用別人的場景，只是一個借鑒、思想。如果跟我的情況不行，估計要另想辦法了，或自己開發或重寫一些element-tree的源碼，方法總比困難多不是嗎？

---

于2021-06-22
最終我還是沒能把這個方法走完，退化到了一個簡單的方案，就是在拖拽后，重新刷新源節點的目標節點，這樣因為數據庫中數據還在，因此還是會出現的。那么怎么刷新父節點呢？

node.loaded = false; node.epxand();

如果你發現node拿不到，那么真是一個遺憾的事情。在el-tree的node-drop事件處理函數中，參數分別是: draggingNode, dropNode, type, event，分別是拖拽的節點對象、拖放的節點對象、類型和事件對象。在這里draggingNode的parent屬性我們拿不到。換一個思路，在node-drag-start事件時記錄一下父節點，那個時候parent字段還不是空！

如果不小心幫助到了你，請幫忙點贊哦:)

總結

以上是生活随笔為你收集整理的使用el-tree支持保留源节点的拖放操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。