@splicetree/plugin-dnd 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @splicetree/plugin-dnd
 
+## 3.0.0
+
+### Major Changes
+
+- 拖拽插件（dnd）交互与事件重构：
+  - 支持在容器“外部顶部/外部底部”释放也触发移动：新增 containerProps，用于绑定到列表容器；顶部释放移动到顶级 index=0、底部释放移动到顶级末尾
+  - 将 move 事件负载重构为：{ index, parent, oldIndex, oldParent, node, event }，便于直接按索引/父节点进行写回与业务处理（破坏性变更）
+  - 在 dragend 增加回退逻辑：容器外释放也会执行移动并清理状态；ghost 先隐藏再移动，降低延迟感知
+  - 支持“上部分包含上外部、下部分包含下外部”：节点 dragleave 根据指针越界方向归并为 BEFORE/AFTER，一致化落点判定
+
+  迁移指南：
+  - 监听 move 事件的代码需改用新的负载字段；例如在 autoUpdateParent=false 时按 { node, parent, index } 执行 moveNode 写回
+  - 若需要顶级外部释放行为，请在顶级列表容器上绑定 containerProps()
+
 ## 2.0.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -37,18 +37,13 @@ declare module '@splicetree/core' {
     dnd?: DndOptions;
   }
   interface SpliceTreeEventPayloadMap {
-    /**
-     * 节点移动事件负载
-     * @property id 源节点 id
-     * @property parentId 新父级节点 id（INSIDE/BEFORE/AFTER 场景下可能不同）
-     * @property position 落点位置（BEFORE/INSIDE/AFTER）
-     * @property beforeId 插入到谁之前（AFTER/BEFORE 场景下提供）
-     */
     move: {
-      id: string;
-      parentId?: string;
-      position: DropPosition;
-      beforeId?: string;
+      index: number;
+      parent: SpliceTreeNode<any> | undefined;
+      oldIndex: number;
+      oldParent: SpliceTreeNode<any> | undefined;
+      node: SpliceTreeNode<any>;
+      event?: DragEvent | MouseEvent;
     };
   }
   interface SpliceTreeInstance {
@@ -58,7 +53,7 @@ declare module '@splicetree/core' {
      * @param targetId 目标节点 id
      * @param position 落点位置（前/内/后）
      */
-    drop: (srcId: string, targetId: string, position: DropPosition) => void;
+    drop: (srcId: string, targetId: string, position: DropPosition, e?: DragEvent | MouseEvent) => void;
     /** 当前拖拽源节点 id */
     draggingId?: string;
     /** 目标节点的悬停位置映射 */
@@ -68,9 +63,9 @@ declare module '@splicetree/core' {
     /** DOM 事件：悬停计算并更新位置 */
     onDragOver: (id: string, el: HTMLElement, e: DragEvent | MouseEvent) => void;
     /** DOM 事件：离开目标，清理悬停状态 */
-    onDragLeave: (id: string) => void;
+    onDragLeave: (id: string, e?: DragEvent) => void;
     /** DOM 事件：在目标上释放后执行移动 */
-    onDrop: (targetId: string) => void;
+    onDrop: (targetId: string, e?: DragEvent | MouseEvent) => void;
     /** 可直接 v-bind 到节点的拖拽属性集合（逐节点） */
     dragProps: (id: string, behavior?: DragBehavior) => {
       /** 是否可拖拽 */
@@ -93,6 +88,10 @@ declare module '@splicetree/core' {
       padding?: boolean;
       margin?: boolean;
     }) => Record<string, any>;
+    containerProps: (parentId?: string) => {
+      onDragover: (e: DragEvent) => void;
+      onDrop: (e: DragEvent) => void;
+    };
   }
   /**
    * 节点扩展（DnD）

package/dist/index.js

@@ -40,6 +40,38 @@ const dnd = {
 		let ghostMarginLeft = 0;
 		let ghostMarginRight = 0;
 		const behaviors = /* @__PURE__ */ new Map();
+		let containerHoverParentId;
+		let containerHoverPos;
+		let lastHoverTargetId;
+		const refresh = () => ctx.events.emit({
+			name: "visibility",
+			keys: ctx.tree.expandedKeys()
+		});
+		const setGhostByEl = (el, pos) => {
+			ghostTop = el.offsetTop;
+			ghostHeight = el.offsetHeight;
+			ghostPos = pos;
+			const parent = el.parentElement;
+			if (parent) {
+				const styles = getComputedStyle(parent);
+				ghostInsetLeft = Number.parseFloat(styles.paddingLeft || "0");
+				ghostInsetRight = Number.parseFloat(styles.paddingRight || "0");
+				ghostMarginLeft = Number.parseFloat(styles.marginLeft || "0");
+				ghostMarginRight = Number.parseFloat(styles.marginRight || "0");
+			} else {
+				ghostInsetLeft = 0;
+				ghostInsetRight = 0;
+				ghostMarginLeft = 0;
+				ghostMarginRight = 0;
+			}
+		};
+		const topLevelItems = () => ctx.tree.items().filter((n) => !n.getParent());
+		const siblingsOf = (parentId) => parentId ? ctx.tree.getNode(parentId).getChildren() : topLevelItems();
+		const computeOldIndexForNode = (node) => {
+			const p = node.getParent();
+			if (p) return p.getChildren().findIndex((n) => n.id === node.id);
+			return topLevelItems().findIndex((n) => n.id === node.id);
+		};
 		const isDisabledById = (_id) => !!readonly;
 		const getDraggedNodeIds = (primaryId) => {
 			const tree = ctx.tree;
@@ -61,10 +93,7 @@ const dnd = {
 		const onDragStart = (id) => {
 			if (isDisabledById(id)) return;
 			draggingId = id;
-			ctx.events.emit({
-				name: "visibility",
-				keys: ctx.tree.expandedKeys()
-			});
+			refresh();
 		};
 		/**
 		* 依据指针相对目标节点的垂直比例计算落点
@@ -145,9 +174,8 @@ const dnd = {
 				return;
 			}
 			hoverPositions.set(id, pos);
-			ghostTop = el.offsetTop;
-			ghostHeight = el.offsetHeight;
-			ghostPos = pos;
+			setGhostByEl(el, pos);
+			lastHoverTargetId = id;
 			const parent = el.parentElement;
 			if (parent) {
 				const styles = getComputedStyle(parent);
@@ -161,21 +189,35 @@ const dnd = {
 				ghostMarginLeft = 0;
 				ghostMarginRight = 0;
 			}
-			ctx.events.emit({
-				name: "visibility",
-				keys: ctx.tree.expandedKeys()
-			});
+			refresh();
 		};
 		/**
 		* 离开目标：清理该目标的悬停位置并刷新视图
 		* @param id 目标节点 id
 		*/
-		const onDragLeave = (id) => {
-			hoverPositions.delete(id);
-			ctx.events.emit({
-				name: "visibility",
-				keys: ctx.tree.expandedKeys()
-			});
+		const onDragLeave = (id, e) => {
+			if (!draggingId) return;
+			const el = e?.currentTarget ?? document.querySelector(`[data-id="${id}"]`);
+			if (!el) {
+				ctx.events.emit({
+					name: "visibility",
+					keys: ctx.tree.expandedKeys()
+				});
+				return;
+			}
+			const rect = el.getBoundingClientRect();
+			const cy = e?.clientY;
+			if (typeof cy === "number") {
+				if (cy < rect.top) {
+					hoverPositions.set(id, DropPosition.BEFORE);
+					setGhostByEl(el, DropPosition.BEFORE);
+				} else if (cy > rect.bottom) {
+					hoverPositions.set(id, DropPosition.AFTER);
+					setGhostByEl(el, DropPosition.AFTER);
+				}
+			}
+			lastHoverTargetId = id;
+			refresh();
 		};
 		/**
 		* 执行移动：依据落点位置更新树结构，必要时写回父字段并派发事件
@@ -185,7 +227,7 @@ const dnd = {
 		* @param targetId 目标节点 id
 		* @param position 落点位置
 		*/
-		const drop = (srcId, targetId, position) => {
+		const drop = (srcId, targetId, position, e) => {
 			const src = ctx.tree.getNode(srcId);
 			const target = ctx.tree.getNode(targetId);
 			if (!src || !target) return;
@@ -197,25 +239,30 @@ const dnd = {
 			if (srcId === targetId) return;
 			const srcParentId = src.getParent()?.id;
 			if (position === DropPosition.INSIDE && srcParentId === targetId) return;
+			const oldParent = src.getParent();
+			const oldIndex = computeOldIndexForNode(src);
 			if (position === DropPosition.INSIDE) {
 				if (autoUpdateParent) {
 					ctx.tree.moveNode(srcId, targetId);
 					Reflect.set(src.original, parentField, targetId);
 					if (autoExpandOnDrop) ctx.tree.expand(targetId);
-					ctx.events.emit({
-						name: "visibility",
-						keys: ctx.tree.expandedKeys()
-					});
+					refresh();
 				}
+				const newParent$1 = ctx.tree.getNode(targetId);
+				const newIndex$1 = autoUpdateParent ? newParent$1.getChildren().findIndex((n) => n.id === srcId) : newParent$1.getChildren().length;
 				ctx.events.emit({
 					name: "move",
-					id: srcId,
-					parentId: targetId,
-					position
+					index: newIndex$1,
+					parent: newParent$1,
+					oldIndex,
+					oldParent,
+					node: src,
+					event: e
 				});
 				return;
 			}
-			const parentId = target.getParent()?.id;
+			const parent = target.getParent();
+			const parentId = parent?.id;
 			if (position === DropPosition.BEFORE) {
 				if (autoUpdateParent) {
 					ctx.tree.moveNode(srcId, parentId, targetId);
@@ -225,39 +272,46 @@ const dnd = {
 						keys: ctx.tree.expandedKeys()
 					});
 				}
+				const idx$1 = siblingsOf(parentId).filter((n) => n.id !== srcId).findIndex((n) => n.id === targetId);
+				const newParent$1 = parent;
+				const newIndex$1 = autoUpdateParent ? newParent$1 ? newParent$1.getChildren().findIndex((n) => n.id === srcId) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === srcId) : idx$1 >= 0 ? idx$1 : 0;
 				ctx.events.emit({
 					name: "move",
-					id: srcId,
-					parentId,
-					position,
-					beforeId: targetId
+					index: newIndex$1,
+					parent: newParent$1,
+					oldIndex,
+					oldParent,
+					node: src,
+					event: e
 				});
 				return;
 			}
-			const siblings = (parentId ? ctx.tree.getNode(parentId).getChildren() : ctx.tree.items().filter((n) => !n.getParent())).filter((n) => n.id !== srcId);
+			const siblings = siblingsOf(parentId).filter((n) => n.id !== srcId);
 			const idx = siblings.findIndex((n) => n.id === targetId);
 			const afterSibling = idx >= 0 ? siblings[idx + 1]?.id : void 0;
 			if (autoUpdateParent) {
 				ctx.tree.moveNode(srcId, parentId, afterSibling);
 				Reflect.set(src.original, parentField, parentId);
-				ctx.events.emit({
-					name: "visibility",
-					keys: ctx.tree.expandedKeys()
-				});
+				refresh();
 			}
+			const newParent = parent;
+			const predictedIndex = afterSibling ? idx + 1 : siblings.length;
+			const newIndex = autoUpdateParent ? newParent ? newParent.getChildren().findIndex((n) => n.id === srcId) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === srcId) : predictedIndex;
 			ctx.events.emit({
 				name: "move",
-				id: srcId,
-				parentId,
-				position,
-				beforeId: afterSibling
+				index: newIndex,
+				parent: newParent,
+				oldIndex,
+				oldParent,
+				node: src,
+				event: e
 			});
 		};
 		/**
 		* 完成拖拽：依据最后一次悬停位置执行移动并清理状态
 		* @param targetId 释放时所处的目标节点 id
 		*/
-		const onDrop = (targetId) => {
+		const onDrop = (targetId, e) => {
 			if (!draggingId) return;
 			const pos = hoverPositions.get(targetId);
 			if (pos === void 0) {
@@ -272,7 +326,7 @@ const dnd = {
 			const draggedIds = getDraggedNodeIds(draggingId);
 			let idsToProcess = draggedIds;
 			if (pos === DropPosition.AFTER) idsToProcess = [...draggedIds].reverse();
-			for (const id of idsToProcess) drop(id, targetId, pos);
+			for (const id of idsToProcess) drop(id, targetId, pos, e);
 			hoverPositions.clear();
 			draggingId = void 0;
 			ctx.events.emit({
@@ -306,24 +360,168 @@ const dnd = {
 						onDragStart(id);
 					}
 				},
-				onDragend: (_e) => {
+				onDragend: (e) => {
 					handleActive.delete(id);
+					if (!draggingId) return;
+					const draggedIds = getDraggedNodeIds(draggingId);
+					ghostPos = void 0;
+					ctx.events.emit({
+						name: "visibility",
+						keys: ctx.tree.expandedKeys()
+					});
+					if (containerHoverPos !== void 0) {
+						const parentId2 = containerHoverParentId;
+						const rawSiblings = parentId2 ? ctx.tree.getNode(parentId2).getChildren() : ctx.tree.items().filter((n) => !n.getParent());
+						const processIds = containerHoverPos === DropPosition.AFTER ? [...draggedIds].reverse() : draggedIds;
+						for (const did of processIds) {
+							const siblings = rawSiblings.filter((n) => n.id !== did);
+							const firstId = siblings[0]?.id;
+							const beforeId = containerHoverPos === DropPosition.BEFORE ? firstId : void 0;
+							const src2 = ctx.tree.getNode(did);
+							if (!src2) continue;
+							const oldParent2 = src2.getParent();
+							const oldIndex2 = oldParent2 ? oldParent2.getChildren().findIndex((n) => n.id === did) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === did);
+							if (autoUpdateParent) {
+								ctx.tree.moveNode(did, parentId2, beforeId);
+								Reflect.set(src2.original, parentField, parentId2);
+								ctx.events.emit({
+									name: "visibility",
+									keys: ctx.tree.expandedKeys()
+								});
+							}
+							const newParent2 = parentId2 ? ctx.tree.getNode(parentId2) : void 0;
+							const newIndex2 = autoUpdateParent ? newParent2 ? newParent2.getChildren().findIndex((n) => n.id === did) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === did) : containerHoverPos === DropPosition.BEFORE ? 0 : siblings.length;
+							ctx.events.emit({
+								name: "move",
+								index: newIndex2,
+								parent: newParent2,
+								oldIndex: oldIndex2,
+								oldParent: oldParent2,
+								node: src2,
+								event: e
+							});
+						}
+						hoverPositions.clear();
+						draggingId = void 0;
+						containerHoverParentId = void 0;
+						containerHoverPos = void 0;
+						ctx.events.emit({
+							name: "visibility",
+							keys: ctx.tree.expandedKeys()
+						});
+						return;
+					}
+					const targetId = lastHoverTargetId;
+					const pos = targetId ? hoverPositions.get(targetId) : void 0;
+					if (targetId && pos !== void 0) {
+						let idsToProcess = draggedIds;
+						if (pos === DropPosition.AFTER) idsToProcess = [...draggedIds].reverse();
+						for (const did of idsToProcess) drop(did, targetId, pos, e);
+					}
+					hoverPositions.clear();
+					draggingId = void 0;
+					ctx.events.emit({
+						name: "visibility",
+						keys: ctx.tree.expandedKeys()
+					});
 				},
 				onDragover: (e) => {
 					e.preventDefault();
 					const el = e.currentTarget;
 					onDragOver(id, el, e);
 				},
-				onDragleave: (_e) => {
-					onDragLeave(id);
+				onDragleave: (e) => {
+					onDragLeave(id, e);
 				},
 				onDrop: (e) => {
 					e.preventDefault();
-					onDrop(id);
+					onDrop(id, e);
 					handleActive.delete(id);
 				}
 			};
 		};
+		const containerProps = (parentId) => {
+			return {
+				onDragover: (e) => {
+					if (!draggingId) return;
+					e.preventDefault();
+					const el = e.currentTarget;
+					const rect = el.getBoundingClientRect();
+					const y = ("clientY" in e ? e.clientY : 0) - rect.top;
+					if (Math.max(0, Math.min(1, rect.height ? y / rect.height : 0)) < .5) {
+						containerHoverPos = DropPosition.BEFORE;
+						ghostPos = DropPosition.BEFORE;
+						ghostTop = el.offsetTop;
+						ghostHeight = el.offsetHeight;
+					} else {
+						containerHoverPos = DropPosition.AFTER;
+						ghostPos = DropPosition.AFTER;
+						ghostTop = el.offsetTop;
+						ghostHeight = el.offsetHeight;
+					}
+					containerHoverParentId = parentId;
+					const styles = getComputedStyle(el);
+					ghostInsetLeft = Number.parseFloat(styles.paddingLeft || "0");
+					ghostInsetRight = Number.parseFloat(styles.paddingRight || "0");
+					ghostMarginLeft = Number.parseFloat(styles.marginLeft || "0");
+					ghostMarginRight = Number.parseFloat(styles.marginRight || "0");
+					ctx.events.emit({
+						name: "visibility",
+						keys: ctx.tree.expandedKeys()
+					});
+				},
+				onDrop: (e) => {
+					e.preventDefault();
+					if (!draggingId || containerHoverPos === void 0) {
+						containerHoverParentId = void 0;
+						containerHoverPos = void 0;
+						ghostPos = void 0;
+						return;
+					}
+					const draggedIds = getDraggedNodeIds(draggingId);
+					const parentId2 = containerHoverParentId;
+					const rawSiblings = parentId2 ? ctx.tree.getNode(parentId2).getChildren() : ctx.tree.items().filter((n) => !n.getParent());
+					const processIds = containerHoverPos === DropPosition.AFTER ? [...draggedIds].reverse() : draggedIds;
+					for (const id of processIds) {
+						const siblings = rawSiblings.filter((n) => n.id !== id);
+						const firstId = siblings[0]?.id;
+						const beforeId = containerHoverPos === DropPosition.BEFORE ? firstId : void 0;
+						const src = ctx.tree.getNode(id);
+						if (!src) continue;
+						const oldParent = src.getParent();
+						const oldIndex = oldParent ? oldParent.getChildren().findIndex((n) => n.id === id) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === id);
+						if (autoUpdateParent) {
+							ctx.tree.moveNode(id, parentId2, beforeId);
+							Reflect.set(src.original, parentField, parentId2);
+							ctx.events.emit({
+								name: "visibility",
+								keys: ctx.tree.expandedKeys()
+							});
+						}
+						const newParent = parentId2 ? ctx.tree.getNode(parentId2) : void 0;
+						const newIndex = autoUpdateParent ? newParent ? newParent.getChildren().findIndex((n) => n.id === id) : ctx.tree.items().filter((n) => !n.getParent()).findIndex((n) => n.id === id) : containerHoverPos === DropPosition.BEFORE ? 0 : siblings.length;
+						ctx.events.emit({
+							name: "move",
+							index: newIndex,
+							parent: newParent,
+							oldIndex,
+							oldParent,
+							node: src,
+							event: e
+						});
+					}
+					hoverPositions.clear();
+					draggingId = void 0;
+					containerHoverParentId = void 0;
+					containerHoverPos = void 0;
+					ghostPos = void 0;
+					ctx.events.emit({
+						name: "visibility",
+						keys: ctx.tree.expandedKeys()
+					});
+				}
+			};
+		};
 		const ghostStyle = (opts$1) => {
 			if (!draggingId || ghostPos === void 0) return { style: { display: "none" } };
 			const usePadding = opts$1?.padding ?? true;
@@ -381,7 +579,8 @@ const dnd = {
 				return draggingId;
 			},
 			dragProps,
-			ghostStyle
+			ghostStyle,
+			containerProps
 		};
 	},
 	extendNode(node, ctx) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@splicetree/plugin-dnd",
   "type": "module",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "author": {
     "email": "michael.cocova@gmail.com",
     "name": "Michael Cocova"
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@splicetree/core": "2.0.0"
+    "@splicetree/core": "3.0.0"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/src/index.ts

@@ -1,4 +1,4 @@
-import type { SpliceTreePlugin, SpliceTreePluginContext } from '@splicetree/core'
+import type { SpliceTreeNode, SpliceTreePlugin, SpliceTreePluginContext } from '@splicetree/core'
 import type { DndNode, DndOptions, DragBehavior } from './types'
 import { computePosition } from './position'
 import { DropPosition } from './types'
@@ -9,14 +9,14 @@ declare module '@splicetree/core' {
     dnd?: DndOptions
   }
   interface SpliceTreeEventPayloadMap {
-    /**
-     * 节点移动事件负载
-     * @property id 源节点 id
-     * @property parentId 新父级节点 id（INSIDE/BEFORE/AFTER 场景下可能不同）
-     * @property position 落点位置（BEFORE/INSIDE/AFTER）
-     * @property beforeId 插入到谁之前（AFTER/BEFORE 场景下提供）
-     */
-    move: { id: string, parentId?: string, position: DropPosition, beforeId?: string }
+    move: {
+      index: number
+      parent: SpliceTreeNode<any> | undefined
+      oldIndex: number
+      oldParent: SpliceTreeNode<any> | undefined
+      node: SpliceTreeNode<any>
+      event?: DragEvent | MouseEvent
+    }
   }
 
   interface SpliceTreeInstance {
@@ -26,7 +26,7 @@ declare module '@splicetree/core' {
      * @param targetId 目标节点 id
      * @param position 落点位置（前/内/后）
      */
-    drop: (srcId: string, targetId: string, position: DropPosition) => void
+    drop: (srcId: string, targetId: string, position: DropPosition, e?: DragEvent | MouseEvent) => void
     /** 当前拖拽源节点 id */
     draggingId?: string
     /** 目标节点的悬停位置映射 */
@@ -36,9 +36,9 @@ declare module '@splicetree/core' {
     /** DOM 事件：悬停计算并更新位置 */
     onDragOver: (id: string, el: HTMLElement, e: DragEvent | MouseEvent) => void
     /** DOM 事件：离开目标，清理悬停状态 */
-    onDragLeave: (id: string) => void
+    onDragLeave: (id: string, e?: DragEvent) => void
     /** DOM 事件：在目标上释放后执行移动 */
-    onDrop: (targetId: string) => void
+    onDrop: (targetId: string, e?: DragEvent | MouseEvent) => void
     /** 可直接 v-bind 到节点的拖拽属性集合（逐节点） */
     dragProps: (id: string, behavior?: DragBehavior) => {
       /** 是否可拖拽 */
@@ -58,6 +58,10 @@ declare module '@splicetree/core' {
     }
     /** 统一占位样式绑定对象 */
     ghostStyle: (opts?: { padding?: boolean, margin?: boolean }) => Record<string, any>
+    containerProps: (parentId?: string) => {
+      onDragover: (e: DragEvent) => void
+      onDrop: (e: DragEvent) => void
+    }
   }
 
   /**
@@ -103,6 +107,39 @@ export const dnd: SpliceTreePlugin = {
     let ghostMarginLeft = 0
     let ghostMarginRight = 0
     const behaviors = new Map<string, DragBehavior>()
+    let containerHoverParentId: string | undefined
+    let containerHoverPos: DropPosition | undefined
+    let lastHoverTargetId: string | undefined
+    const refresh = () => ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+    const setGhostByEl = (el: HTMLElement, pos: DropPosition) => {
+      ghostTop = el.offsetTop
+      ghostHeight = el.offsetHeight
+      ghostPos = pos
+      const parent = el.parentElement
+      if (parent) {
+        const styles = getComputedStyle(parent)
+        ghostInsetLeft = Number.parseFloat(styles.paddingLeft || '0')
+        ghostInsetRight = Number.parseFloat(styles.paddingRight || '0')
+        ghostMarginLeft = Number.parseFloat(styles.marginLeft || '0')
+        ghostMarginRight = Number.parseFloat(styles.marginRight || '0')
+      } else {
+        ghostInsetLeft = 0
+        ghostInsetRight = 0
+        ghostMarginLeft = 0
+        ghostMarginRight = 0
+      }
+    }
+    const topLevelItems = () => ctx.tree.items().filter(n => !n.getParent())
+    const siblingsOf = (parentId?: string) => parentId ? ctx.tree.getNode(parentId)!.getChildren() : topLevelItems()
+    const computeOldIndexForNode = (node: SpliceTreeNode<any>) => {
+      const p = node.getParent()
+      if (p) {
+        const list = p.getChildren()
+        return list.findIndex(n => n.id === node.id)
+      }
+      const list = topLevelItems()
+      return list.findIndex(n => n.id === node.id)
+    }
 
     const isDisabledById = (_id: string | undefined): boolean => !!readonly
 
@@ -137,7 +174,7 @@ export const dnd: SpliceTreePlugin = {
         return
       }
       draggingId = id
-      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+      refresh()
     }
 
     /**
@@ -228,9 +265,8 @@ export const dnd: SpliceTreePlugin = {
       }
 
       hoverPositions.set(id, pos)
-      ghostTop = el.offsetTop
-      ghostHeight = el.offsetHeight
-      ghostPos = pos
+      setGhostByEl(el, pos)
+      lastHoverTargetId = id
       const parent = el.parentElement
       if (parent) {
         const styles = getComputedStyle(parent)
@@ -244,16 +280,40 @@ export const dnd: SpliceTreePlugin = {
         ghostMarginLeft = 0
         ghostMarginRight = 0
       }
-      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+      refresh()
     }
 
     /**
      * 离开目标：清理该目标的悬停位置并刷新视图
      * @param id 目标节点 id
      */
-    const onDragLeave = (id: string) => {
-      hoverPositions.delete(id)
-      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+    const onDragLeave = (id: string, e?: DragEvent) => {
+      if (!draggingId) {
+        return
+      }
+      const el = (e?.currentTarget ?? document.querySelector(`[data-id="${id}"]`)) as HTMLElement | null
+      if (!el) {
+        // 无法定位元素时，保留最后一次悬停位置，避免外部释放丢失落点
+        ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+        return
+      }
+      const rect = el.getBoundingClientRect()
+      const cy = e?.clientY
+      if (typeof cy === 'number') {
+        if (cy < rect.top) {
+          // 上外部：归并为 BEFORE
+          hoverPositions.set(id, DropPosition.BEFORE)
+          setGhostByEl(el, DropPosition.BEFORE)
+        } else if (cy > rect.bottom) {
+          // 下外部：归并为 AFTER
+          hoverPositions.set(id, DropPosition.AFTER)
+          setGhostByEl(el, DropPosition.AFTER)
+        } else {
+          // 水平离开或无法判断：保留原有位置，不删除
+        }
+      }
+      lastHoverTargetId = id
+      refresh()
     }
 
     /**
@@ -264,7 +324,7 @@ export const dnd: SpliceTreePlugin = {
      * @param targetId 目标节点 id
      * @param position 落点位置
      */
-    const drop = (srcId: string, targetId: string, position: DropPosition) => {
+    const drop = (srcId: string, targetId: string, position: DropPosition, e?: DragEvent | MouseEvent) => {
       const src = ctx.tree.getNode(srcId)
       const target = ctx.tree.getNode(targetId)
       if (!src || !target) {
@@ -292,6 +352,9 @@ export const dnd: SpliceTreePlugin = {
         return
       }
 
+      const oldParent = src.getParent()
+      const oldIndex = computeOldIndexForNode(src)
+
       if (position === DropPosition.INSIDE) {
         if (autoUpdateParent) {
           ctx.tree.moveNode(srcId, targetId)
@@ -299,9 +362,13 @@ export const dnd: SpliceTreePlugin = {
           if (autoExpandOnDrop) {
             ctx.tree.expand(targetId)
           }
-          ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+          refresh()
         }
-        ctx.events.emit({ name: 'move', id: srcId, parentId: targetId, position })
+        const newParent = ctx.tree.getNode(targetId)
+        const newIndex = autoUpdateParent
+          ? newParent!.getChildren().findIndex(n => n.id === srcId)
+          : newParent!.getChildren().length
+        ctx.events.emit({ name: 'move', index: newIndex, parent: newParent, oldIndex, oldParent, node: src, event: e })
         return
       }
 
@@ -313,27 +380,38 @@ export const dnd: SpliceTreePlugin = {
           Reflect.set(src.original, parentField, parentId)
           ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
         }
-        ctx.events.emit({ name: 'move', id: srcId, parentId, position, beforeId: targetId })
+        const siblings = siblingsOf(parentId).filter(n => n.id !== srcId)
+        const idx = siblings.findIndex(n => n.id === targetId)
+        const newParent = parent
+        const newIndex = autoUpdateParent
+          ? (newParent ? newParent.getChildren().findIndex(n => n.id === srcId) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === srcId))
+          : (idx >= 0 ? idx : 0)
+        ctx.events.emit({ name: 'move', index: newIndex, parent: newParent, oldIndex, oldParent, node: src, event: e })
         return
       }
 
-      const rawSiblings = parentId ? ctx.tree.getNode(parentId)!.getChildren() : ctx.tree.items().filter(n => !n.getParent())
+      const rawSiblings = siblingsOf(parentId)
       const siblings = rawSiblings.filter(n => n.id !== srcId)
       const idx = siblings.findIndex(n => n.id === targetId)
       const afterSibling = idx >= 0 ? siblings[idx + 1]?.id : undefined
       if (autoUpdateParent) {
         ctx.tree.moveNode(srcId, parentId, afterSibling)
         Reflect.set(src.original, parentField, parentId)
-        ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+        refresh()
       }
-      ctx.events.emit({ name: 'move', id: srcId, parentId, position, beforeId: afterSibling })
+      const newParent = parent
+      const predictedIndex = afterSibling ? (idx + 1) : siblings.length
+      const newIndex = autoUpdateParent
+        ? (newParent ? newParent.getChildren().findIndex(n => n.id === srcId) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === srcId))
+        : predictedIndex
+      ctx.events.emit({ name: 'move', index: newIndex, parent: newParent, oldIndex, oldParent, node: src, event: e })
     }
 
     /**
      * 完成拖拽：依据最后一次悬停位置执行移动并清理状态
      * @param targetId 释放时所处的目标节点 id
      */
-    const onDrop = (targetId: string) => {
+    const onDrop = (targetId: string, e?: DragEvent | MouseEvent) => {
       if (!draggingId) {
         return
       }
@@ -352,7 +430,7 @@ export const dnd: SpliceTreePlugin = {
       }
 
       for (const id of idsToProcess) {
-        drop(id, targetId, pos)
+        drop(id, targetId, pos, e)
       }
 
       hoverPositions.clear()
@@ -372,7 +450,9 @@ export const dnd: SpliceTreePlugin = {
       return {
         draggable: canDrag,
         onMousedown: (e: MouseEvent) => {
-          if (!handleSelector) return
+          if (!handleSelector) {
+            return
+          }
           const path = (e as any).composedPath?.() as Element[] | undefined
           const allowed = path?.some(el => (el as Element)?.matches?.(handleSelector)) ?? false
           if (allowed) {
@@ -393,25 +473,153 @@ export const dnd: SpliceTreePlugin = {
             onDragStart(id)
           }
         },
-        onDragend: (_e: DragEvent) => {
+        onDragend: (e: DragEvent) => {
           handleActive.delete(id)
+          if (!draggingId) {
+            return
+          }
+          const draggedIds = getDraggedNodeIds(draggingId)
+          // 提前隐藏 ghost，降低感知延迟
+          ghostPos = undefined
+          ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+
+          if (containerHoverPos !== undefined) {
+            const parentId2 = containerHoverParentId
+            const rawSiblings = parentId2 ? ctx.tree.getNode(parentId2)!.getChildren() : ctx.tree.items().filter(n => !n.getParent())
+            const processIds = containerHoverPos === DropPosition.AFTER ? [...draggedIds].reverse() : draggedIds
+            for (const did of processIds) {
+              const siblings = rawSiblings.filter(n => n.id !== did)
+              const firstId = siblings[0]?.id
+              const beforeId = containerHoverPos === DropPosition.BEFORE ? firstId : undefined
+              const src2 = ctx.tree.getNode(did)
+              if (!src2) {
+                continue
+              }
+              const oldParent2 = src2.getParent()
+              const oldIndex2 = oldParent2 ? oldParent2.getChildren().findIndex(n => n.id === did) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === did)
+              if (autoUpdateParent) {
+                ctx.tree.moveNode(did, parentId2, beforeId)
+                Reflect.set(src2.original, parentField, parentId2)
+                ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+              }
+              const newParent2 = parentId2 ? ctx.tree.getNode(parentId2)! : undefined
+              const newIndex2 = autoUpdateParent
+                ? (newParent2 ? newParent2.getChildren().findIndex(n => n.id === did) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === did))
+                : (containerHoverPos === DropPosition.BEFORE ? 0 : siblings.length)
+              ctx.events.emit({ name: 'move', index: newIndex2, parent: newParent2, oldIndex: oldIndex2, oldParent: oldParent2, node: src2!, event: e })
+            }
+            hoverPositions.clear()
+            draggingId = undefined
+            containerHoverParentId = undefined
+            containerHoverPos = undefined
+            ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+            return
+          }
+
+          const targetId = lastHoverTargetId
+          const pos = targetId ? hoverPositions.get(targetId) : undefined
+          if (targetId && pos !== undefined) {
+            let idsToProcess = draggedIds
+            if (pos === DropPosition.AFTER) {
+              idsToProcess = [...draggedIds].reverse()
+            }
+            for (const did of idsToProcess) {
+              drop(did, targetId, pos, e)
+            }
+          }
+          hoverPositions.clear()
+          draggingId = undefined
+          ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
         },
         onDragover: (e: DragEvent) => {
           e.preventDefault()
           const el = e.currentTarget as HTMLElement
           onDragOver(id, el, e)
         },
-        onDragleave: (_e: DragEvent) => {
-          onDragLeave(id)
+        onDragleave: (e: DragEvent) => {
+          onDragLeave(id, e)
         },
         onDrop: (e: DragEvent) => {
           e.preventDefault()
-          onDrop(id)
+          onDrop(id, e)
           handleActive.delete(id)
         },
       }
     }
 
+    const containerProps = (parentId?: string) => {
+      return {
+        onDragover: (e: DragEvent) => {
+          if (!draggingId) {
+            return
+          }
+          e.preventDefault()
+          const el = e.currentTarget as HTMLElement
+          const rect = el.getBoundingClientRect()
+          const y = ('clientY' in e ? e.clientY : 0) - rect.top
+          const ratio = Math.max(0, Math.min(1, rect.height ? y / rect.height : 0))
+          if (ratio < 0.5) {
+            containerHoverPos = DropPosition.BEFORE
+            ghostPos = DropPosition.BEFORE
+            ghostTop = el.offsetTop
+            ghostHeight = el.offsetHeight
+          } else {
+            containerHoverPos = DropPosition.AFTER
+            ghostPos = DropPosition.AFTER
+            ghostTop = el.offsetTop
+            ghostHeight = el.offsetHeight
+          }
+          containerHoverParentId = parentId
+          const styles = getComputedStyle(el)
+          ghostInsetLeft = Number.parseFloat(styles.paddingLeft || '0')
+          ghostInsetRight = Number.parseFloat(styles.paddingRight || '0')
+          ghostMarginLeft = Number.parseFloat(styles.marginLeft || '0')
+          ghostMarginRight = Number.parseFloat(styles.marginRight || '0')
+          ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+        },
+        onDrop: (e: DragEvent) => {
+          e.preventDefault()
+          if (!draggingId || containerHoverPos === undefined) {
+            containerHoverParentId = undefined
+            containerHoverPos = undefined
+            ghostPos = undefined
+            return
+          }
+          const draggedIds = getDraggedNodeIds(draggingId)
+          const parentId2 = containerHoverParentId
+          const rawSiblings = parentId2 ? ctx.tree.getNode(parentId2)!.getChildren() : ctx.tree.items().filter(n => !n.getParent())
+          const processIds = containerHoverPos === DropPosition.AFTER ? [...draggedIds].reverse() : draggedIds
+          for (const id of processIds) {
+            const siblings = rawSiblings.filter(n => n.id !== id)
+            const firstId = siblings[0]?.id
+            const beforeId = containerHoverPos === DropPosition.BEFORE ? firstId : undefined
+            const src = ctx.tree.getNode(id)
+            if (!src) {
+              continue
+            }
+            const oldParent = src.getParent()
+            const oldIndex = oldParent ? oldParent.getChildren().findIndex(n => n.id === id) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === id)
+            if (autoUpdateParent) {
+              ctx.tree.moveNode(id, parentId2, beforeId)
+              Reflect.set(src.original, parentField, parentId2)
+              ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+            }
+            const newParent = parentId2 ? ctx.tree.getNode(parentId2)! : undefined
+            const newIndex = autoUpdateParent
+              ? (newParent ? newParent.getChildren().findIndex(n => n.id === id) : ctx.tree.items().filter(n => !n.getParent()).findIndex(n => n.id === id))
+              : (containerHoverPos === DropPosition.BEFORE ? 0 : siblings.length)
+            ctx.events.emit({ name: 'move', index: newIndex, parent: newParent, oldIndex, oldParent, node: src!, event: e })
+          }
+          hoverPositions.clear()
+          draggingId = undefined
+          containerHoverParentId = undefined
+          containerHoverPos = undefined
+          ghostPos = undefined
+          ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+        },
+      }
+    }
+
     const ghostStyle = (opts?: { padding?: boolean, margin?: boolean }) => {
       if (!draggingId || ghostPos === undefined) {
         return { style: { display: 'none' } }
@@ -450,6 +658,7 @@ export const dnd: SpliceTreePlugin = {
       // 通用 DOM 绑定集合
       dragProps,
       ghostStyle,
+      containerProps,
     }
   },
   /**