plain-design 1.0.0-beta.21 → 1.0.0-beta.23

package/src/packages/components/TreeCore/createTreeDraggier.tsx

@@ -1,412 +1,412 @@
-import Scroll from "../Scroll";
-import {iTreeNode} from "./createTreeNode";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {iTreeMethods} from "./createTreeMethods";
-import {getComponentCls, iMouseEvent, nextTick, reactive} from "plain-design-composition";
-import {iElementRect} from "../../utils/getRowEl";
-import {iTreeUtils} from "./createTreeUtils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {useAutoScrollUtils} from "../useAutoScrollUtils";
-import {findParentElement} from "../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
-import {addClass} from "plain-utils/dom/addClass";
-import {iTreeHooks} from "./createTreeHooks";
-import {ClientZoom} from "../ClientZoom";
-import {delay} from "plain-utils/utils/delay";
-
-export function createTreeDraggier(
-  {
-    rowClass,
-    contentClass,
-    getScroll,
-    methods,
-    utils,
-    hooks,
-  }: {
-    rowClass: string,                             // 行的类名，用来mousedown的时候通过draggier节点向上查找行节点
-    contentClass: string,                         // 行的content节点类名，用来找到行节点之后通过行节点以及contentClass找到content节点并且读取位置信息
-    getScroll: () => typeof Scroll.use.class | null | undefined,// 获取滚动的Scroll组件，用来拖拽的时候自动移动
-    methods: iTreeMethods,                        // 一些操作树节点的工具方法
-    utils: iTreeUtils,                            // 树的一些工具函数
-    hooks: iTreeHooks,
-  }) {
-
-  /**
-   * 拖拽副作用
-   * @author  韦胜健
-   * @date    2023/6/1 21:01
-   */
-  const { effects: draggierEffects } = createEffects();
-
-  /**
-   * 自动滚动工具
-   * @author  韦胜健
-   * @date    2023/6/1 21:01
-   */
-  const autoScrollUtils = useAutoScrollUtils({ vertical: true, scrollUtilsParameter: { getScrollElement: () => getScroll()?.refs.wrapper } });
-
-  /**
-   * 拖拽放置指示器
-   * @author  韦胜健
-   * @date    2023/6/1 21:09
-   */
-  const indicatorHandler = (() => {
-
-    /*指示器高度大小*/
-    const indicatorSize = 1;
-
-    /*指示器元素*/
-    let indicatorElement: HTMLElement | null = null;
-
-    /**
-     * 创建指示器
-     * @author  韦胜健
-     * @date    2023/6/1 21:09
-     */
-    const start = () => {
-      indicatorElement = document.createElement('div');
-      addClass(indicatorElement, getComponentCls('tree-draggier-indicator'));
-      document.body.appendChild(indicatorElement);
-      draggierEffects.push(() => {
-        if (!indicatorElement) {return;}
-        document.body.removeChild(indicatorElement);
-        indicatorElement = null;
-      });
-    };
-
-    /**
-     * 更新指示器定位以及样式
-     * @author  韦胜健
-     * @date    2023/6/1 21:09
-     */
-    const update = () => {
-      if (!indicatorElement) {return;}
-      const { contentRect, droppable, dropType, isHideDraggier } = shadowTreeNode.getState()!.data!.move;
-
-      if (isHideDraggier) {
-        /*隐藏指示器，比如当前处于滚动状态*/
-        indicatorElement.style.opacity = '0';
-      } else {
-        /*更新指示器*/
-        indicatorElement.style.top = `${dropType === eTreeDropType.next ? (contentRect.top + contentRect.height - indicatorSize) : (contentRect.top - 1)}px`;
-        indicatorElement.style.left = `${contentRect.left}px`;
-        indicatorElement.style.width = `${contentRect.width}px`;
-        indicatorElement.style.height = `${dropType === eTreeDropType.inner ? contentRect.height : indicatorSize}px`;
-        indicatorElement.style.opacity = dropType === eTreeDropType.inner ? '0.15' : '';
-        indicatorElement.setAttribute('data-available', String(droppable));
-      }
-    };
-
-    return { start, update };
-  })();
-
-  /**
-   * 克隆tree node内容
-   * @author  韦胜健
-   * @date    2023/6/1 21:10
-   */
-  const shadowTreeNode = (() => {
-
-    const reactiveState = reactive({ dragging: false, });
-
-    let staticState = null as null | {
-      startNode: iTreeNode,                           // 拖拽开始的时候节点
-      rowElement: HTMLElement,                        // 拖拽开始的row对象
-      start: {
-        x: number,                                    // 拖拽开始时鼠标x定位
-        y: number,                                    // 拖拽开始时鼠标y定位
-      },
-      data: null | {
-        left: number,                                 // 拖拽开始时row的left定位
-        top: number,                                  // 拖拽开始时row的top定位
-        cloneTreeNode: HTMLDivElement,                // 克隆的tree node
-        move: {
-          x: number,                                  // 拖拽移动时鼠标x定位
-          y: number,                                  // 拖拽移动时鼠标y定位
-          moveNode: iTreeNode,                        // 拖拽移动过程中的节点
-          dropType: typeof eTreeDropType.TYPE,        // 当前拖拽移动过程中的放置类型
-          droppable: boolean,                         // 当前拖拽过程中，是否可放置
-          contentRect: iElementRect,                  // tree node的content节点定位信息
-          isHideDraggier: boolean,                    // 当前的滚动父容器是否发生了滚动
-        },
-      },
-    };
-
-    /**
-     * 开始克隆
-     * @author  韦胜健
-     * @date    2023/6/1 21:11
-     */
-    const initDraggierState = () => {
-      if (!staticState) {return;}
-
-      /*克隆tree node中的content节点*/
-      const contentEl = staticState.rowElement.querySelector(`.${contentClass}`) as HTMLElement;
-      const contentRect = contentEl.getBoundingClientRect();
-
-      const cloneTreeNode = (() => {
-        const wrapper = document.createElement('div') as HTMLDivElement;
-        const { padding, fontSize } = getComputedStyle(contentEl);
-        wrapper.style.pointerEvents = 'none';
-        wrapper.style.width = contentRect.width + 'px';
-        wrapper.style.height = contentRect.height + 'px';
-        wrapper.style.top = contentRect.top + 'px';
-        wrapper.style.left = contentRect.left + 'px';
-        wrapper.style.position = 'fixed';
-        wrapper.style.opacity = '0.5';
-        wrapper.style.padding = padding;
-        wrapper.style.boxSizing = 'border-box';
-        wrapper.style.fontSize = fontSize;
-        wrapper.style.backgroundColor = `var(--${getComponentCls('')}gray-3)`;
-        wrapper.style.zIndex = '100';
-        const element = contentEl.cloneNode(true);
-        wrapper.appendChild(element);
-        document.body.appendChild(wrapper);
-        draggierEffects.push(() => {document.body.removeChild(wrapper);});
-        return wrapper;
-      })();
-
-      staticState.data = {
-        top: contentRect.top,
-        left: contentRect.left,
-        cloneTreeNode: cloneTreeNode,
-        move: {
-          x: staticState.start.x,
-          y: staticState.start.y,
-          moveNode: staticState.startNode,
-          dropType: eTreeDropType.inner,
-          contentRect,
-          droppable: false,
-          isHideDraggier: false,
-        },
-      };
-
-      /*---------------------------------------隐藏原始行-------------------------------------------*/
-
-      const { rowElement } = staticState;
-      rowElement.style.opacity = '0';
-      draggierEffects.push((() => {rowElement.style.opacity = '';}));
-
-      /*---------------------------------------父节点滚动-------------------------------------------*/
-      draggierEffects.push(
-        onParentElementsScroll(rowElement, () => {update();})
-      );
-
-      /*---------------------------------------禁用页面选择-------------------------------------------*/
-      /*禁用选中页面文本*/
-      disabledUserSelect();
-      draggierEffects.push(() => {enableUserSelect();});
-
-      /*---------------------------------------初始化indicator-------------------------------------------*/
-
-      indicatorHandler.start();
-
-      /*---------------------------------------自动滚动-------------------------------------------*/
-      /*自动滚动*/
-      autoScrollUtils.show();
-      draggierEffects.push(() => {autoScrollUtils.hide();});
-
-      /*---------------------------------------进入row的时候更新cloneTreeNode定位-------------------------------------------*/
-
-      ret.onMousemoveRow = update;
-      draggierEffects.push(() => {ret.onMousemoveRow = null;});
-    };
-
-    const start = (e: MouseEvent | iMouseEvent, node: iTreeNode) => {
-
-      /*不可以拖拽的节点不处理*/
-      if (!utils.isAllowDraggable(node)) {
-        return;
-      }
-
-      const rowElement = findParentElement(e.currentTarget as HTMLElement, i => hasClass(i, rowClass));
-      if (!rowElement) {
-        throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
-      }
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      staticState = {
-        startNode: node,
-        rowElement,
-        start: {
-          x: clientX,
-          y: clientY,
-        },
-        data: null,
-      };
-      reactiveState.dragging = true;
-      /**
-       * 拖拽结束之后，处理拖拽数据
-       * @author  韦胜健
-       * @date    2023/6/1 21:13
-       */
-      draggierEffects.push(async () => {
-        await (async () => {
-          if (!!staticState?.data) {
-            const { startNode, } = staticState;
-            const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
-            if (!droppable || isHideDraggier) {
-              return;
-            }
-            const newParentNode = dropType === eTreeDropType.inner ? moveNode : moveNode.parent;
-            const oldParentNode = startNode.parent;
-            const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
-            const newSiblingsBak = [...newSiblings];
-            const oldSiblings = methods.getParentChildrenData(startNode);
-            const oldSiblingsBak = [...oldSiblings];
-
-            methods.removeSelf(startNode!);
-            switch (dropType) {
-              case eTreeDropType.prev:
-                methods.previousSibling(moveNode!, startNode!);
-                break;
-              case eTreeDropType.inner:
-                methods.unshiftChild(moveNode!, startNode!);
-                await methods.expand(moveNode!);
-                break;
-              case eTreeDropType.next:
-                methods.nextSibling(moveNode!, startNode!);
-                await methods.collapse(moveNode);
-                break;
-            }
-            await nextTick();
-            await Promise.all([
-              methods.refreshCheckStatus(startNode!.parent),
-              methods.refreshCheckStatus(moveNode!.parent)
-            ]);
-            await hooks.onDragChange.exec({
-              data: startNode.data,
-              newParent: newParentNode?.data,
-              oldParent: oldParentNode?.data,
-              node: startNode,
-              newParentNode,
-              oldParentNode,
-              newSiblings,
-              oldSiblings,
-              newSiblingsBak,
-              oldSiblingsBak,
-              undo: () => {
-                newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
-                oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
-              },
-            });
-          }
-        })();
-        delay().then(() => {
-          staticState = null;
-          reactiveState.dragging = false;
-        });
-      });
-    };
-
-    /**
-     * 鼠标移动时初始化拖拽
-     * @author  韦胜健
-     * @date    2023/6/1 21:13
-     */
-    const move = (e: MouseEvent) => {
-      if (!staticState) {return;}
-
-      let isDragging = !!staticState.data;
-
-      if (!isDragging) {
-        /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        const { clientY } = ClientZoom.getClientPosition(e);
-        if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
-          isDragging = true;
-          initDraggierState();
-        }
-      }
-    };
-
-    /**
-     * 更新拖拽信息
-     * @author  韦胜健
-     * @date    2023/6/1 21:13
-     */
-    const update = (e?: MouseEvent | iMouseEvent, node?: iTreeNode) => {
-
-      if (!staticState?.data) {return;}
-
-      if (!e || !node) {
-        /*没有鼠标事件，也没有node，证明是滚动，此时隐藏indicator*/
-        staticState.data.move.isHideDraggier = true;
-        staticState.data.cloneTreeNode.style.opacity = '0';
-      } else {
-        const { clientX, clientY } = ClientZoom.getClientPosition(e);
-        staticState.data.move.isHideDraggier = false;
-        staticState.data.move.x = clientX;
-        staticState.data.move.y = clientY;
-        staticState.data.move.moveNode = node;
-        staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
-        const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;
-        staticState.data.move.dropType = percent < 0.3 ? eTreeDropType.prev : percent > 0.7 ? eTreeDropType.next : eTreeDropType.inner;
-        staticState.data.move.droppable = ((() => {
-          const startNode = staticState.startNode;
-          const moveNode = staticState.data!.move.moveNode;
-          let droppable = true;
-          if (moveNode.empty) {
-            /*空节点不可以放置*/
-            droppable = false;
-          } else {
-            /*不可以放到子节点中*/
-            if (startNode.key === moveNode.key || moveNode.parents().findIndex(i => i.key === startNode.key) > -1) {
-              droppable = false;
-            }
-            /*isAllowDroppable判断是否可以放置*/
-            if (!utils.isAllowDroppable(startNode, moveNode, staticState.data!.move.dropType)) {
-              droppable = false;
-            }
-          }
-          return droppable;
-        })());
-
-        /*更新克隆节点的定位*/
-        let top = staticState.data.top + (staticState.data.move.y - staticState.start.y);
-        let left = staticState.data.left + (staticState.data.move.x - staticState.start.x);
-        const scrollRect = autoScrollUtils.scrollUtils.getScrollElement()?.getBoundingClientRect();
-        if (!!scrollRect) {
-          top = Math.max(scrollRect.top, Math.min(top, scrollRect.top + scrollRect.height - staticState.data.move.contentRect.height));
-        }
-        staticState.data.cloneTreeNode.style.opacity = '0.5';
-        staticState.data.cloneTreeNode.style.left = `${left}px`;
-        staticState.data.cloneTreeNode.style.top = `${top}px`;
-      }
-
-      /*更新indicator*/
-      indicatorHandler.update();
-    };
-
-    const isDragging = () => reactiveState.dragging;
-
-    const getState = () => staticState;
-
-    return { start, move, update, isDragging, getState };
-  })();
-
-  const ret = reactive({
-    onMousedownDraggier: (e: iMouseEvent, node: iTreeNode) => {
-      if (e.button === 2) {return;}
-      shadowTreeNode.start(e, node);
-      document.addEventListener('mousemove', shadowTreeNode.move);
-      document.addEventListener('mouseup', draggierEffects.clear);
-      draggierEffects.push(() => {
-        document.removeEventListener('mousemove', shadowTreeNode.move);
-        document.removeEventListener('mouseup', draggierEffects.clear);
-      });
-    },
-    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void),
-    isDragging: () => shadowTreeNode.isDragging(),
-  });
-
-  return ret;
-}
-
-/**
- * 拖拽树节点的时候放置类型
- * @author  韦胜健
- * @date    2022/9/27 8:59
- */
-export const eTreeDropType = createEnum(['prev', 'inner', 'next'] as const);
+import Scroll from "../Scroll";
+import {iTreeNode} from "./createTreeNode";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {iTreeMethods} from "./createTreeMethods";
+import {getComponentCls, iMouseEvent, nextTick, reactive} from "plain-design-composition";
+import {iElementRect} from "../../utils/getRowEl";
+import {iTreeUtils} from "./createTreeUtils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {useAutoScrollUtils} from "../useAutoScrollUtils";
+import {findParentElement} from "../../utils/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
+import {addClass} from "plain-utils/dom/addClass";
+import {iTreeHooks} from "./createTreeHooks";
+import {ClientZoom} from "../ClientZoom";
+import {delay} from "plain-utils/utils/delay";
+
+export function createTreeDraggier(
+  {
+    rowClass,
+    contentClass,
+    getScroll,
+    methods,
+    utils,
+    hooks,
+  }: {
+    rowClass: string,                             // 行的类名，用来mousedown的时候通过draggier节点向上查找行节点
+    contentClass: string,                         // 行的content节点类名，用来找到行节点之后通过行节点以及contentClass找到content节点并且读取位置信息
+    getScroll: () => typeof Scroll.use.class | null | undefined,// 获取滚动的Scroll组件，用来拖拽的时候自动移动
+    methods: iTreeMethods,                        // 一些操作树节点的工具方法
+    utils: iTreeUtils,                            // 树的一些工具函数
+    hooks: iTreeHooks,
+  }) {
+
+  /**
+   * 拖拽副作用
+   * @author  韦胜健
+   * @date    2023/6/1 21:01
+   */
+  const { effects: draggierEffects } = createEffects();
+
+  /**
+   * 自动滚动工具
+   * @author  韦胜健
+   * @date    2023/6/1 21:01
+   */
+  const autoScrollUtils = useAutoScrollUtils({ vertical: true, scrollUtilsParameter: { getScrollElement: () => getScroll()?.refs.wrapper } });
+
+  /**
+   * 拖拽放置指示器
+   * @author  韦胜健
+   * @date    2023/6/1 21:09
+   */
+  const indicatorHandler = (() => {
+
+    /*指示器高度大小*/
+    const indicatorSize = 1;
+
+    /*指示器元素*/
+    let indicatorElement: HTMLElement | null = null;
+
+    /**
+     * 创建指示器
+     * @author  韦胜健
+     * @date    2023/6/1 21:09
+     */
+    const start = () => {
+      indicatorElement = document.createElement('div');
+      addClass(indicatorElement, getComponentCls('tree-draggier-indicator'));
+      document.body.appendChild(indicatorElement);
+      draggierEffects.push(() => {
+        if (!indicatorElement) {return;}
+        document.body.removeChild(indicatorElement);
+        indicatorElement = null;
+      });
+    };
+
+    /**
+     * 更新指示器定位以及样式
+     * @author  韦胜健
+     * @date    2023/6/1 21:09
+     */
+    const update = () => {
+      if (!indicatorElement) {return;}
+      const { contentRect, droppable, dropType, isHideDraggier } = shadowTreeNode.getState()!.data!.move;
+
+      if (isHideDraggier) {
+        /*隐藏指示器，比如当前处于滚动状态*/
+        indicatorElement.style.opacity = '0';
+      } else {
+        /*更新指示器*/
+        indicatorElement.style.top = `${dropType === eTreeDropType.next ? (contentRect.top + contentRect.height - indicatorSize) : (contentRect.top - 1)}px`;
+        indicatorElement.style.left = `${contentRect.left}px`;
+        indicatorElement.style.width = `${contentRect.width}px`;
+        indicatorElement.style.height = `${dropType === eTreeDropType.inner ? contentRect.height : indicatorSize}px`;
+        indicatorElement.style.opacity = dropType === eTreeDropType.inner ? '0.15' : '';
+        indicatorElement.setAttribute('data-available', String(droppable));
+      }
+    };
+
+    return { start, update };
+  })();
+
+  /**
+   * 克隆tree node内容
+   * @author  韦胜健
+   * @date    2023/6/1 21:10
+   */
+  const shadowTreeNode = (() => {
+
+    const reactiveState = reactive({ dragging: false, });
+
+    let staticState = null as null | {
+      startNode: iTreeNode,                           // 拖拽开始的时候节点
+      rowElement: HTMLElement,                        // 拖拽开始的row对象
+      start: {
+        x: number,                                    // 拖拽开始时鼠标x定位
+        y: number,                                    // 拖拽开始时鼠标y定位
+      },
+      data: null | {
+        left: number,                                 // 拖拽开始时row的left定位
+        top: number,                                  // 拖拽开始时row的top定位
+        cloneTreeNode: HTMLDivElement,                // 克隆的tree node
+        move: {
+          x: number,                                  // 拖拽移动时鼠标x定位
+          y: number,                                  // 拖拽移动时鼠标y定位
+          moveNode: iTreeNode,                        // 拖拽移动过程中的节点
+          dropType: typeof eTreeDropType.TYPE,        // 当前拖拽移动过程中的放置类型
+          droppable: boolean,                         // 当前拖拽过程中，是否可放置
+          contentRect: iElementRect,                  // tree node的content节点定位信息
+          isHideDraggier: boolean,                    // 当前的滚动父容器是否发生了滚动
+        },
+      },
+    };
+
+    /**
+     * 开始克隆
+     * @author  韦胜健
+     * @date    2023/6/1 21:11
+     */
+    const initDraggierState = () => {
+      if (!staticState) {return;}
+
+      /*克隆tree node中的content节点*/
+      const contentEl = staticState.rowElement.querySelector(`.${contentClass}`) as HTMLElement;
+      const contentRect = contentEl.getBoundingClientRect();
+
+      const cloneTreeNode = (() => {
+        const wrapper = document.createElement('div') as HTMLDivElement;
+        const { padding, fontSize } = getComputedStyle(contentEl);
+        wrapper.style.pointerEvents = 'none';
+        wrapper.style.width = contentRect.width + 'px';
+        wrapper.style.height = contentRect.height + 'px';
+        wrapper.style.top = contentRect.top + 'px';
+        wrapper.style.left = contentRect.left + 'px';
+        wrapper.style.position = 'fixed';
+        wrapper.style.opacity = '0.5';
+        wrapper.style.padding = padding;
+        wrapper.style.boxSizing = 'border-box';
+        wrapper.style.fontSize = fontSize;
+        wrapper.style.backgroundColor = `var(--${getComponentCls('')}gray-3)`;
+        wrapper.style.zIndex = '100';
+        const element = contentEl.cloneNode(true);
+        wrapper.appendChild(element);
+        document.body.appendChild(wrapper);
+        draggierEffects.push(() => {document.body.removeChild(wrapper);});
+        return wrapper;
+      })();
+
+      staticState.data = {
+        top: contentRect.top,
+        left: contentRect.left,
+        cloneTreeNode: cloneTreeNode,
+        move: {
+          x: staticState.start.x,
+          y: staticState.start.y,
+          moveNode: staticState.startNode,
+          dropType: eTreeDropType.inner,
+          contentRect,
+          droppable: false,
+          isHideDraggier: false,
+        },
+      };
+
+      /*---------------------------------------隐藏原始行-------------------------------------------*/
+
+      const { rowElement } = staticState;
+      rowElement.style.opacity = '0';
+      draggierEffects.push((() => {rowElement.style.opacity = '';}));
+
+      /*---------------------------------------父节点滚动-------------------------------------------*/
+      draggierEffects.push(
+        onParentElementsScroll(rowElement, () => {update();})
+      );
+
+      /*---------------------------------------禁用页面选择-------------------------------------------*/
+      /*禁用选中页面文本*/
+      disabledUserSelect();
+      draggierEffects.push(() => {enableUserSelect();});
+
+      /*---------------------------------------初始化indicator-------------------------------------------*/
+
+      indicatorHandler.start();
+
+      /*---------------------------------------自动滚动-------------------------------------------*/
+      /*自动滚动*/
+      autoScrollUtils.show();
+      draggierEffects.push(() => {autoScrollUtils.hide();});
+
+      /*---------------------------------------进入row的时候更新cloneTreeNode定位-------------------------------------------*/
+
+      ret.onMousemoveRow = update;
+      draggierEffects.push(() => {ret.onMousemoveRow = null;});
+    };
+
+    const start = (e: MouseEvent | iMouseEvent, node: iTreeNode) => {
+
+      /*不可以拖拽的节点不处理*/
+      if (!utils.isAllowDraggable(node)) {
+        return;
+      }
+
+      const rowElement = findParentElement(e.currentTarget as HTMLElement, i => hasClass(i, rowClass));
+      if (!rowElement) {
+        throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
+      }
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState = {
+        startNode: node,
+        rowElement,
+        start: {
+          x: clientX,
+          y: clientY,
+        },
+        data: null,
+      };
+      reactiveState.dragging = true;
+      /**
+       * 拖拽结束之后，处理拖拽数据
+       * @author  韦胜健
+       * @date    2023/6/1 21:13
+       */
+      draggierEffects.push(async () => {
+        await (async () => {
+          if (!!staticState?.data) {
+            const { startNode, } = staticState;
+            const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
+            if (!droppable || isHideDraggier) {
+              return;
+            }
+            const newParentNode = dropType === eTreeDropType.inner ? moveNode : moveNode.parent;
+            const oldParentNode = startNode.parent;
+            const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
+            const newSiblingsBak = [...newSiblings];
+            const oldSiblings = methods.getParentChildrenData(startNode);
+            const oldSiblingsBak = [...oldSiblings];
+
+            methods.removeSelf(startNode!);
+            switch (dropType) {
+              case eTreeDropType.prev:
+                methods.previousSibling(moveNode!, startNode!);
+                break;
+              case eTreeDropType.inner:
+                methods.unshiftChild(moveNode!, startNode!);
+                await methods.expand(moveNode!);
+                break;
+              case eTreeDropType.next:
+                methods.nextSibling(moveNode!, startNode!);
+                await methods.collapse(moveNode);
+                break;
+            }
+            await nextTick();
+            await Promise.all([
+              methods.refreshCheckStatus(startNode!.parent),
+              methods.refreshCheckStatus(moveNode!.parent)
+            ]);
+            await hooks.onDragChange.exec({
+              data: startNode.data,
+              newParent: newParentNode?.data,
+              oldParent: oldParentNode?.data,
+              node: startNode,
+              newParentNode,
+              oldParentNode,
+              newSiblings,
+              oldSiblings,
+              newSiblingsBak,
+              oldSiblingsBak,
+              undo: () => {
+                newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
+                oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
+              },
+            });
+          }
+        })();
+        delay().then(() => {
+          staticState = null;
+          reactiveState.dragging = false;
+        });
+      });
+    };
+
+    /**
+     * 鼠标移动时初始化拖拽
+     * @author  韦胜健
+     * @date    2023/6/1 21:13
+     */
+    const move = (e: MouseEvent) => {
+      if (!staticState) {return;}
+
+      let isDragging = !!staticState.data;
+
+      if (!isDragging) {
+        /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
+        const { clientY } = ClientZoom.getClientPosition(e);
+        if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
+          isDragging = true;
+          initDraggierState();
+        }
+      }
+    };
+
+    /**
+     * 更新拖拽信息
+     * @author  韦胜健
+     * @date    2023/6/1 21:13
+     */
+    const update = (e?: MouseEvent | iMouseEvent, node?: iTreeNode) => {
+
+      if (!staticState?.data) {return;}
+
+      if (!e || !node) {
+        /*没有鼠标事件，也没有node，证明是滚动，此时隐藏indicator*/
+        staticState.data.move.isHideDraggier = true;
+        staticState.data.cloneTreeNode.style.opacity = '0';
+      } else {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        staticState.data.move.isHideDraggier = false;
+        staticState.data.move.x = clientX;
+        staticState.data.move.y = clientY;
+        staticState.data.move.moveNode = node;
+        staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
+        const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;
+        staticState.data.move.dropType = percent < 0.3 ? eTreeDropType.prev : percent > 0.7 ? eTreeDropType.next : eTreeDropType.inner;
+        staticState.data.move.droppable = ((() => {
+          const startNode = staticState.startNode;
+          const moveNode = staticState.data!.move.moveNode;
+          let droppable = true;
+          if (moveNode.empty) {
+            /*空节点不可以放置*/
+            droppable = false;
+          } else {
+            /*不可以放到子节点中*/
+            if (startNode.key === moveNode.key || moveNode.parents().findIndex(i => i.key === startNode.key) > -1) {
+              droppable = false;
+            }
+            /*isAllowDroppable判断是否可以放置*/
+            if (!utils.isAllowDroppable(startNode, moveNode, staticState.data!.move.dropType)) {
+              droppable = false;
+            }
+          }
+          return droppable;
+        })());
+
+        /*更新克隆节点的定位*/
+        let top = staticState.data.top + (staticState.data.move.y - staticState.start.y);
+        let left = staticState.data.left + (staticState.data.move.x - staticState.start.x);
+        const scrollRect = autoScrollUtils.scrollUtils.getScrollElement()?.getBoundingClientRect();
+        if (!!scrollRect) {
+          top = Math.max(scrollRect.top, Math.min(top, scrollRect.top + scrollRect.height - staticState.data.move.contentRect.height));
+        }
+        staticState.data.cloneTreeNode.style.opacity = '0.5';
+        staticState.data.cloneTreeNode.style.left = `${left}px`;
+        staticState.data.cloneTreeNode.style.top = `${top}px`;
+      }
+
+      /*更新indicator*/
+      indicatorHandler.update();
+    };
+
+    const isDragging = () => reactiveState.dragging;
+
+    const getState = () => staticState;
+
+    return { start, move, update, isDragging, getState };
+  })();
+
+  const ret = reactive({
+    onMousedownDraggier: (e: iMouseEvent, node: iTreeNode) => {
+      if (e.button === 2) {return;}
+      shadowTreeNode.start(e, node);
+      document.addEventListener('mousemove', shadowTreeNode.move);
+      document.addEventListener('mouseup', draggierEffects.clear);
+      draggierEffects.push(() => {
+        document.removeEventListener('mousemove', shadowTreeNode.move);
+        document.removeEventListener('mouseup', draggierEffects.clear);
+      });
+    },
+    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void),
+    isDragging: () => shadowTreeNode.isDragging(),
+  });
+
+  return ret;
+}
+
+/**
+ * 拖拽树节点的时候放置类型
+ * @author  韦胜健
+ * @date    2022/9/27 8:59
+ */
+export const eTreeDropType = createEnum(['prev', 'inner', 'next'] as const);