fix(tree): 修复拖拽到其它 Tree 节点时会焦距的问题

Author: jxhhdx

packages/devui-vue/devui/tree/src/components/tree-node.tsx

@@ -31,7 +31,8 @@ export default defineComponent({
       onDragstart,
       onDragover,
       onDragleave,
-      onDrop
+      onDrop,
+      onDragend,
     } = inject(USE_TREE_TOKEN) as Partial<IUseTree>;
     const treeInstance = inject(TREE_INSTANCE) as ComponentInternalInstance | null;
     const ns = useNamespace('tree');
@@ -88,6 +89,7 @@ export default defineComponent({
           onDragover: (event: DragEvent) => onDragover?.(event),
           onDragleave: (event: DragEvent) => onDragleave?.(event),
           onDrop: (event: DragEvent) => onDrop?.(event, data.value),
+          onDragend: (event: DragEvent) => onDragend?.(event),
         };
       }
       return (

packages/devui-vue/devui/tree/src/composables/use-dragdrop.ts

@@ -91,6 +91,12 @@ export function useDragdrop(props: TreeProps, data: Ref<IInnerTreeNode[]>) {
       return cloneData;
     };
 
+    const clearDragDropInfo = () => {
+      dragState.dropType = undefined;
+      dragState.draggingNode = null;
+      dragState.draggingTreeNode = null;
+    };
+
     const onDragstart = (event: DragEvent, treeNode: IInnerTreeNode): void => {
       event.stopPropagation();
       dragState.draggingNode = event.target as HTMLElement | null;
@@ -189,17 +195,22 @@ export function useDragdrop(props: TreeProps, data: Ref<IInnerTreeNode[]>) {
         } catch (e) {
           console.error(e);
         }
-        dragState.dropType = undefined;
-        dragState.draggingNode = null;
-        dragState.draggingTreeNode = null;
+        clearDragDropInfo();
       }
     };
 
+    const onDragend = (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      clearDragDropInfo();
+    };
+
     return {
       onDragstart,
       onDragover,
       onDragleave,
       onDrop,
+      onDragend,
     };
   };
 }

packages/devui-vue/devui/tree/src/composables/use-tree-types.ts

@@ -147,6 +147,7 @@ export interface IUseDraggable {
   onDragover: (event: DragEvent) => void;
   onDragleave: (event: DragEvent) => void;
   onDrop: (event: DragEvent, dropNode: IInnerTreeNode) => void;
+  onDragend: (event: DragEvent) => void;
 }
 
 export interface IDropNode {