feat: add drag

Author: Create-Peace

src/App.vue

@@ -3,7 +3,7 @@
     <Tree :tree-data="demeData" 
       show-checkbox 
       hasHalfelEction
-      checkStrictly
+      draggable
       @on-checkbox-change="handleChangeCheckBox" 
       @on-checked-item="handleChangeItem">
       <!-- <template v-slot="{node}">

src/components/Tree.js

@@ -1,39 +1,4 @@
-// import { construct } from "core-js/fn/reflect"
-
-const TREE_DATA = { selected: false, partialSelected: false, expanded: false };
-class TreeData {
-  constructor(data) {
-    this.data = { ...TREE_DATA, ...data };
-    this.children = [];
-  }
-  setParent(node) {
-    this.parent = node;
-  }
-  addChild(node) {
-    this.children.push(node);
-    node.setParent(this);
-  }
-  isSelected() {
-    return this?.data?.selected ?? false;
-  }
-  isExpanded() {
-    return this?.data?.expanded ?? false;
-  }
-  isPartialSelected() {
-    return this?.data?.partialSelected ?? false;
-  }
-  // TODO 这里两个方法需要合并一下
-  isAllChildrenSelected() {
-    // eslint-disable-next-line no-debugger
-    // debugger
-    return this.children.every((child) => child.isSelected());
-  }
-  hasChildrenPartialSelected() {
-    return this.children.some(
-      (child) => child.isSelected() || child.isPartialSelected()
-    );
-  }
-}
+import TreeData from './TreeData'
 
 const generateNode = (data, props) => {
   const { children, ...rest } = data;
@@ -191,7 +156,12 @@ export default {
         this.refreshDown(child);
       });
     },
+    handleDrop(event) {
+      event.stopPropagation()
+    },
     dragStart(event, treeNode) {
+      console.log('dratstart')
+      event.stopPropagation()
       if (
         typeof this.allowDrag === "function" &&
         !this.allowDrag(treeNode.node)
@@ -209,10 +179,12 @@ export default {
       } catch (e) {
         console.error(e);
       }
-      this.draggingNode = treeNode;
+      this.dragInfo.draggingNode = treeNode;
+      console.log('this.dragInfo.draggingNode', this.dragInfo.draggingNode)
       this.$emit("node-drag-start", treeNode.node, event);
     },
     dragOver(event) {
+      event.stopPropagation()
       const dragInfo = this.dragInfo;
       const dropNode = findNearestComponent(event.target, "TreeNode");
       const oldDropNode = dragInfo.dropNode;
@@ -251,6 +223,7 @@ export default {
       if (dropPrev || dropInner || dropNext) {
         dragInfo.dropNode = dropNode;
       }
+      console.log('dropNode', dropNode)
       // TODO 这里的逻辑需要实现
       if (dropNode.node.nextSibling === draggingNode.node) {
         dropNext = false;
@@ -303,7 +276,7 @@ export default {
       }
 
       const iconPosition = dropNode.$el
-        .querySelector("sh__expand-icon")
+        .querySelector(".sh__expand-icon")
         .getBoundingClientRect();
       const dropIndicator = this.$refs.dropIndicator;
       if (dropType === "before") {
@@ -327,6 +300,7 @@ export default {
       this.$emit("node-drag-over", draggingNode.node, dropNode.node, event);
     },
     dragEnd(event) {
+      event.stopPropagation()
       const dragInfo = this.dragInfo;
       const { draggingNode, dropType, dropNode } = dragInfo;
       event.preventDefault();
@@ -344,9 +318,9 @@ export default {
         } else if (dropType === "inner") {
           dropNode.node.insertChild(draggingNodeCopy);
         }
-        if (dropType !== "none") {
+        // if (dropType !== "none") {
           // this.store.registerNode(draggingNodeCopy);
-        }
+        // }
 
         removeClass(dropNode.$el, "is-drop-inner");
 
@@ -384,6 +358,10 @@ export default {
         {this.root?.children?.map((node, index) => {
           return <TreeNode key={node?.data?.name ?? index} node={node} />;
         })}
+        <div
+        style={{display: this.dragInfo.showDropIndicator? 'none' : 'block'}}
+      class="el-tree__drop-indicator"
+      ref="dropIndicator"></div>
       </div>
     );
   },

src/components/TreeData.js

@@ -0,0 +1,112 @@
+const TREE_DATA = { selected: false, partialSelected: false, expanded: false };
+export default class TreeData {
+  constructor(data) {
+    this.data = { ...TREE_DATA, ...data };
+    this.children = [];
+  }
+  setParent(node) {
+    this.parent = node;
+  }
+  addChild(node) {
+    this.children.push(node);
+    node.setParent(this);
+  }
+  isSelected() {
+    return this?.data?.selected ?? false;
+  }
+  isExpanded() {
+    return this?.data?.expanded ?? false;
+  }
+  isPartialSelected() {
+    return this?.data?.partialSelected ?? false;
+  }
+  // TODO 这里两个方法需要合并一下
+  isAllChildrenSelected() {
+    // eslint-disable-next-line no-debugger
+    // debugger
+    return this.children.every((child) => child.isSelected());
+  }
+  hasChildrenPartialSelected() {
+    return this.children.some(
+      (child) => child.isSelected() || child.isPartialSelected()
+    )
+  }
+  contains(target, deep = true) {
+    const walk = function(parent) {
+      const children = parent.children || [];
+      let result = false;
+      for (let i = 0, j = children.length; i < j; i++) {
+        const child = children[i];
+        if (child === target || (deep && walk(child))) {
+          result = true;
+          break;
+        }
+      }
+      return result;
+    };
+    return walk(this);
+  }
+  get nextSibling() {
+    const parent = this.parent;
+    if (parent) {
+      const index = parent.children.indexOf(this);
+      if (index > -1) {
+        return parent.children[index + 1];
+      }
+    }
+    return null;
+  }
+
+  get previousSibling() {
+    const parent = this.parent;
+    if (parent) {
+      const index = parent.children.indexOf(this);
+      if (index > -1) {
+        return index > 0 ? parent.children[index - 1] : null;
+      }
+    }
+    return null;
+  }
+
+  insertBefore(child, ref) {
+    let index;
+    if (ref) {
+      index = this.children.indexOf(ref);
+    }
+    this.insertChild(child, index);
+  }
+
+  insertAfter(child, ref) {
+    let index;
+    if (ref) {
+      index = this.children.indexOf(ref);
+      if (index !== -1) index += 1;
+    }
+    this.insertChild(child, index);
+  }
+
+  removeChild(child) {
+    const dataIndex = this.children.indexOf(child)
+    if (dataIndex > -1) {
+      child.parent = null;
+      this.children.splice(dataIndex, 1);
+    }
+  }
+
+  remove() {
+    const parent = this.parent;
+    if (parent) {
+      parent.removeChild(this);
+    }
+  }
+
+  insertChild(child, index) {
+
+    if (typeof index === 'undefined' || index < 0) {
+      this.children.push(child);
+    } else {
+      this.children.splice(index, 0, child);
+    }
+  }
+  
+}

src/components/TreeNode.js

@@ -50,10 +50,12 @@ export default {
     },
     nodeView (node, level) {
       const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
-      const { renderTreeNode, $scopedSlots: { default: defaultSlot }} = this.tree
+      const { renderTreeNode, $scopedSlots: { default: defaultSlot } } = this.tree
 
-      return (name && <div style={`margin-left: ${level * 10}px; margin-bottom: 6px; display: inline-block;`}>
-        {node.children && node.children.length? <span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.toggleFold(node)} style="padding: 1px; background: #eee; cursor: pointer">▲</span> : null}
+      return (name && <div
+       style={`margin-left: ${level * 10}px; margin-bottom: 6px; display: inline-block;`}
+       >
+        {node.children && node.children.length? <span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.toggleFold(node)} style="padding: 1px; background: #eee; cursor: pointer">▲</span> : null}
         { partialSelected && `-`}
         {this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
         { renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }
@@ -65,13 +67,25 @@ export default {
         this.tree.refreshExpandedDown(node)
       }
     },
+    handleDragStart(e, treeNode) {
+      console.log('treeNode', treeNode)
+    }
 
   },
 
   render () {
     const { node, level } = this
     const currentNode = this.nodeView(node, level)
-    return (<div>
+    const {  draggable, dragStart, dragOver, dragEnd, handleDrop} = this.tree
+    // console.log(dragStart)
+
+    return (<div
+      draggable={draggable}
+      onDragstart={(e) => dragStart(e, this)}
+      onDragover={(e) => dragOver(e, this)}
+      onDragend={(e) => dragEnd(e, this)}
+      onDrop={handleDrop}
+    >
       {currentNode}
       {
         node?.data?.expanded && node.children?.map(subNode => {