fix plugin draggable

Author: phphe

src/examples/IDMode.vue

@@ -2,7 +2,7 @@
 <template lang="pug">
 div
   h2 ID Mode
-  Tree(:value="idModeData" unfoldAllAtBeginning idMode ref="tree3")
+  Tree.id-mode-tree(:value="idModeData" unfoldAllAtBeginning idMode ref="tree3")
     div(slot-scope="{node, meta, root}")
       b(v-if="node.children && node.children.length > 0" @click="root.toggleFold(node)") {{meta.folded ? '+' : '-'}}&nbsp;
       input(type="checkbox" v-model="meta.checked" @change="root.afterCheckChanged(node)")

src/examples/NodeBackTree.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .tree-children(:class="{'he-tree tree-root': isRoot}")
   .tree-branch(v-for="(node, i) in nodes" :key="metas[i].id" :id="metas[i].DOMId")
-    .tree-node(@mouseenter="NodeBack_onmouseenter" @mouseleave="NodeBack_onmouseleave")
+    .tree-node(@mouseenter="showNodeBack(node)" @mouseleave="hideNodeBack(node)")
       slot(:node="node" :meta="metas[i]" :root="root") {{node.text}}
     transition(v-if="node.children && node.children.length > 0" :name="root.foldingTransition")
       Tree(v-if="!metas[i].folded" :value="node.children" :privateProps="{...childPrivateProps, parent: node}")

src/plugins/NodeBack.vue

@@ -2,29 +2,39 @@
 import * as hp from 'helper-js'
 export default {
   methods: {
-    NodeBack_onmouseenter(e) {
-      const trigger = e.target
-      const back = document.createElement('DIV')
-      hp.addClass(back, 'node-back')
-      const tree = hp.findParent(trigger, (el) => hp.hasClass(el, 'tree-root'))
-      const treeRect = hp.getBoundingClientRect(tree)
-      const treeOffset = hp.getOffset(tree)
-      const triggerRect = hp.getBoundingClientRect(trigger)
-      const triggerOffset = hp.getOffset(trigger)
-      const backOffset = {x: treeOffset.x, y: triggerOffset.y}
-      hp.prependTo(back, tree)
-      const backPosition = hp.getPositionFromOffset(back, backOffset)
-      back.style.top = `${backPosition.y}px`
-      back.style.left = `${backPosition.x}px`
-      back.style.width = `${treeRect.width}px`
-      back.style.height = `${triggerRect.height}px`
-      trigger._NodeBack_el = back
+    showNodeBack(node) {
+      const meta = this.getMetaByNode(node)
+      const branch = document.getElementById(meta.DOMId)
+      const nodeEl = branch.querySelector(`.tree-node`)
+      if (!nodeEl._NodeBack_el) {
+        const back = document.createElement('DIV')
+        hp.addClass(back, 'node-back')
+        nodeEl._NodeBack_el = back
+      }
+      const back = nodeEl._NodeBack_el
+      const update = () => {
+        const tree = hp.findParent(nodeEl, (el) => hp.hasClass(el, 'tree-root'))
+        const treeRect = hp.getBoundingClientRect(tree)
+        const treeOffset = hp.getOffset(tree)
+        const nodeElRect = hp.getBoundingClientRect(nodeEl)
+        const nodeElOffset = hp.getOffset(nodeEl)
+        const backOffset = {x: treeOffset.x, y: nodeElOffset.y}
+        hp.prependTo(back, tree)
+        const backPosition = hp.getPositionFromOffset(back, backOffset)
+        back.style.top = `${backPosition.y}px`
+        back.style.left = `${backPosition.x}px`
+        back.style.width = `${treeRect.width}px`
+        back.style.height = `${nodeElRect.height}px`
+      }
+      update()
     },
-    NodeBack_onmouseleave(e) {
-      const trigger = e.target
-      if (trigger._NodeBack_el) {
-        hp.removeEl(trigger._NodeBack_el)
-        trigger._NodeBack_el = null
+    hideNodeBack(node) {
+      const meta = this.getMetaByNode(node)
+      const branch = document.getElementById(meta.DOMId)
+      const nodeEl = branch.querySelector(`.tree-node`)
+      if (nodeEl._NodeBack_el) {
+        hp.removeEl(nodeEl._NodeBack_el)
+        nodeEl._NodeBack_el = null
       }
     },
   },

src/plugins/draggable/draggable.js

@@ -93,18 +93,18 @@ export default function makeTreeDraggable(treeEl, options = {}) {
       if (!movingElLooped) {
         elsBetweenMovingElAndTree.push(...elsToTree)
       }
-      let outOfTree
       if (!tree) {
-        outOfTree = true
+        // out of tree
+        return
       }
       // check tree if is covered, like modal
       let treeBeCoved
       if (elsBetweenMovingElAndTree && elsBetweenMovingElAndTree[0]) {
-        if (!hp.isDescendantOf(elsBetweenMovingElAndTree[0], tree)) {
+        if (elsBetweenMovingElAndTree[0] !== tree && !hp.isDescendantOf(elsBetweenMovingElAndTree[0], tree)) {
           treeBeCoved = true
         }
       }
-      if (outOfTree || treeBeCoved) {
+      if (treeBeCoved) {
         return
       }
       // if cross tree