disable nodeback when drag

Author: phphe

src/examples/NodeBack.vue

@@ -21,8 +21,9 @@ import Tree from '@/components/Tree.vue'
 import fold from '@/plugins/fold.js'
 import check from '@/plugins/check.js'
 import NodeBack from '@/plugins/NodeBack.vue'
+import Draggable from '@/plugins/draggable/Draggable.vue'
 
-const MixedTree = Tree.mixPlugins([fold, check, NodeBack])
+const MixedTree = Tree.mixPlugins([fold, check, NodeBack, Draggable])
 
 export default {
   components: {Tree: MixedTree},

src/plugins/NodeBack.vue

@@ -1,12 +1,21 @@
 <script>
 import * as hp from 'helper-js'
 export default {
+  data() {
+    return {
+      nodeBackEnabled: true,
+    }
+  },
   methods: {
     showNodeBack(path, opt = {}) {
       /*
       opt
         persistent
        */
+      if (!this.nodeBackEnabled) {
+        // disabled
+        return
+      }
       let nodeEl = opt.nodeEl
       if (!nodeEl) {
         // get by path
@@ -63,6 +72,15 @@ export default {
         }
       }
     },
+    enableNodeBack() {
+      this.nodeBackEnabled = true
+    },
+    disableNodeBack() {
+      for (const {value: el} of hp.iterateALL(this.$el.querySelectorAll(`.node-back`))) {
+        hp.removeEl(el)
+      }
+      this.nodeBackEnabled = false
+    },
   },
   mounted() {
     const onmouseover = (e) => {
@@ -88,6 +106,19 @@ export default {
       hp.offDOM(this.$el, 'mouseover', onmouseover)
     }
     this.$on('hook:beforeDestroy', destroy)
+    // 
+    const ondrag = () => {
+      this.disableNodeBack()
+    }
+    const ondrop = () => {
+      this.enableNodeBack()
+    }
+    this.$root.$on('he-tree-drag', ondrag)
+    this.$root.$on('he-tree-drop', ondrop)
+    this.$on('hook:beforeDestroy', () => {
+      this.$root.$off('he-tree-drag', ondrag)
+      this.$root.$off('he-tree-drop', ondrop)
+    })
   },
 }
 </script>

src/plugins/draggable/Draggable.vue

@@ -184,6 +184,7 @@ export default {
           return false
         }
         store.startTree.$emit('drag', store)
+        this.$root.$emit('he-tree-drag', store)
       },
       filterTargetTree: (targetTreeEl, store) => {
         const targetTree = this.getTreeVmByTreeEl(targetTreeEl)
@@ -206,6 +207,7 @@ export default {
           return false
         }
         targetTree.$emit('drop', store)
+        this.$root.$emit('he-tree-drop', store)
       },
       ondrop: (store, t) => {
         if (store.pathChanged) {