comptree drag

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -2,11 +2,12 @@ import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
-import { Tree } from "ant-design-vue";
+import { Tree, TreeProps } from "ant-design-vue";
 import { defineComponent, nextTick, watch } from "vue";
-import { string } from "vue-types";
+import { string, bool } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
+import { TreeDataItem } from "ant-design-vue/lib/tree";
 
 type TreeItem = {
   key: string;
@@ -54,6 +55,46 @@ export const CompTree = defineComponent({
         });
       }
     );
+    const onDrop = (info: any) => {
+      const dragNode = info.dragNode; //被拖拽
+      const dropNode = info.node; //拖拽落下
+
+      const dragKey = dragNode.key;
+      const dropKey = dropNode.key;
+
+      const dragPos = dragNode.pos.split("-");
+      const dropPos = dropNode.pos.split("-");
+
+      const dragLevel = dragPos.length;
+      const dropLevel = dropPos.length;
+      if (
+        dragLevel >= 5 ||
+        dragKey == "root" ||
+        dragLevel < dropLevel ||
+        dragLevel - dropLevel > 1
+      ) {
+        return;
+      }
+      let parentComp = null;
+      if (dragLevel > dropLevel) {
+        parentComp = helper.findComp(dropKey);
+      } else {
+        parentComp = helper.findParentComp(dropKey);
+      }
+      const currComp = helper.findComp(dragKey);
+      if (!currComp) return;
+      const currParentComp = helper.findParentComp(dragKey);
+      const index = currParentComp?.children.default?.indexOf(currComp.id);
+      if (index != -1) {
+        currParentComp?.children.default?.splice(index as number, 1);
+      }
+      if (!info.dropToGap) {
+        parentComp?.children.default == parentComp?.children.default || [];
+        parentComp?.children.default?.unshift(currComp?.id);
+      } else {
+        parentComp?.children.default?.splice(info.dropPosition, 0, currComp.id);
+      }
+    };
 
     return () => (
       <Tree
@@ -62,6 +103,8 @@ export const CompTree = defineComponent({
         v-model={[state.expandedKeys, "expandedKeys"]}
         selectedKeys={[store.currCompId]}
         blockNode={true}
+        draggable={true}
+        onDrop={onDrop}
         onSelect={(ids) => {
           const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
           actions.pickComp(id);