@splicetree/plugin-dnd 1.1.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @splicetree/plugin-dnd
 
+## 2.0.0
+
+### Minor Changes
+
+- 拖拽插件增强：
+  - 新增 `configuration.dnd.handle`：仅在指定句柄元素上允许拖拽（如 `.handle`）；未设置时整个节点可拖拽
+  - 新增 `configuration.dnd.color`：统一占位（ghost）颜色配置
+
 ## 1.1.0
 
 ## 1.0.0

package/dist/index.d.ts

@@ -25,6 +25,10 @@ interface DndOptions {
   autoExpandOnDrop?: boolean;
   /** 全局只读，禁用所有拖拽与排序 */
   readonly?: boolean;
+  /** 统一占位（ghost）指示颜色，默认 '#4224da' */
+  color?: string;
+  /** 仅在匹配的句柄元素上允许拖拽（如 '.handle'） */
+  handle?: string;
 }
 //#endregion
 //#region src/index.d.ts
@@ -71,8 +75,12 @@ declare module '@splicetree/core' {
     dragProps: (id: string, behavior?: DragBehavior) => {
       /** 是否可拖拽 */
       draggable: boolean;
+      /** 鼠标按下，用于句柄检测 */
+      onMousedown: (e: MouseEvent) => void;
       /** 原生拖拽开始事件处理 */
       onDragstart: (e: DragEvent) => void;
+      /** 原生拖拽结束事件处理 */
+      onDragend: (e: DragEvent) => void;
       /** 原生拖拽悬停事件处理 */
       onDragover: (e: DragEvent) => void;
       /** 原生拖拽离开事件处理 */

package/dist/index.js

@@ -24,7 +24,11 @@ function computePosition(targetId, el, e, src) {
 const dnd = {
 	name: "dnd",
 	setup(ctx) {
-		const { autoExpandOnDrop = true, autoUpdateParent = true, readonly = false } = ctx.options?.configuration?.dnd ?? {};
+		const opts = ctx.options?.configuration?.dnd ?? {};
+		const { autoExpandOnDrop = true, autoUpdateParent = true, readonly = false } = opts;
+		const color = opts.color ?? "#4224da";
+		const handleSelector = opts.handle;
+		const handleActive = /* @__PURE__ */ new Set();
 		const parentField = ctx.tree.options?.configuration?.parentField ?? "parent";
 		let draggingId;
 		const hoverPositions = /* @__PURE__ */ new Map();
@@ -285,12 +289,26 @@ const dnd = {
 			const canDrag = behavior?.draggable === false ? false : !isDisabledById(id);
 			return {
 				draggable: canDrag,
+				onMousedown: (e) => {
+					if (!handleSelector) return;
+					if ((e.composedPath?.())?.some((el) => el?.matches?.(handleSelector)) ?? false) handleActive.add(id);
+					else handleActive.delete(id);
+				},
 				onDragstart: (e) => {
 					if (canDrag) {
+						if (handleSelector) {
+							if (!handleActive.has(id)) {
+								e.preventDefault();
+								return;
+							}
+						}
 						e.dataTransfer?.setData("text/plain", id);
 						onDragStart(id);
 					}
 				},
+				onDragend: (_e) => {
+					handleActive.delete(id);
+				},
 				onDragover: (e) => {
 					e.preventDefault();
 					const el = e.currentTarget;
@@ -302,13 +320,14 @@ const dnd = {
 				onDrop: (e) => {
 					e.preventDefault();
 					onDrop(id);
+					handleActive.delete(id);
 				}
 			};
 		};
-		const ghostStyle = (opts) => {
+		const ghostStyle = (opts$1) => {
 			if (!draggingId || ghostPos === void 0) return { style: { display: "none" } };
-			const usePadding = opts?.padding ?? true;
-			const useMargin = opts?.margin ?? true;
+			const usePadding = opts$1?.padding ?? true;
+			const useMargin = opts$1?.margin ?? true;
 			const leftInset = usePadding ? ghostInsetLeft : 0;
 			const rightInset = usePadding ? ghostInsetRight : 0;
 			const leftMargin = useMargin ? ghostMarginLeft : 0;
@@ -324,7 +343,7 @@ const dnd = {
 					...base,
 					top: `${ghostTop}px`,
 					height: "2px",
-					background: "var(--vp-code-color)",
+					background: color,
 					borderRadius: "2px"
 				},
 				"data-drop-position": -1
@@ -334,7 +353,7 @@ const dnd = {
 					...base,
 					top: `${ghostTop + ghostHeight}px`,
 					height: "2px",
-					background: "var(--vp-code-color)",
+					background: color,
 					borderRadius: "2px"
 				},
 				"data-drop-position": 1
@@ -344,7 +363,7 @@ const dnd = {
 					...base,
 					top: `${ghostTop}px`,
 					height: `${ghostHeight}px`,
-					background: "var(--vp-code-color)",
+					background: color,
 					opacity: .15,
 					borderRadius: "4px"
 				},

package/package.json

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

package/src/index.ts

@@ -43,8 +43,12 @@ declare module '@splicetree/core' {
     dragProps: (id: string, behavior?: DragBehavior) => {
       /** 是否可拖拽 */
       draggable: boolean
+      /** 鼠标按下，用于句柄检测 */
+      onMousedown: (e: MouseEvent) => void
       /** 原生拖拽开始事件处理 */
       onDragstart: (e: DragEvent) => void
+      /** 原生拖拽结束事件处理 */
+      onDragend: (e: DragEvent) => void
       /** 原生拖拽悬停事件处理 */
       onDragover: (e: DragEvent) => void
       /** 原生拖拽离开事件处理 */
@@ -85,6 +89,9 @@ export const dnd: SpliceTreePlugin = {
       autoUpdateParent = true,
       readonly = false,
     } = opts
+    const color = opts.color ?? '#4224da'
+    const handleSelector = opts.handle
+    const handleActive = new Set<string>()
     const parentField = ctx.tree.options?.configuration?.parentField ?? 'parent'
     let draggingId: string | undefined
     const hoverPositions = new Map<string, DropPosition>()
@@ -364,12 +371,31 @@ export const dnd: SpliceTreePlugin = {
       const canDrag = behavior?.draggable === false ? false : !isDisabledById(id)
       return {
         draggable: canDrag,
+        onMousedown: (e: MouseEvent) => {
+          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) {
+            handleActive.add(id)
+          } else {
+            handleActive.delete(id)
+          }
+        },
         onDragstart: (e: DragEvent) => {
           if (canDrag) {
+            if (handleSelector) {
+              if (!handleActive.has(id)) {
+                e.preventDefault()
+                return
+              }
+            }
             e.dataTransfer?.setData('text/plain', id)
             onDragStart(id)
           }
         },
+        onDragend: (_e: DragEvent) => {
+          handleActive.delete(id)
+        },
         onDragover: (e: DragEvent) => {
           e.preventDefault()
           const el = e.currentTarget as HTMLElement
@@ -381,6 +407,7 @@ export const dnd: SpliceTreePlugin = {
         onDrop: (e: DragEvent) => {
           e.preventDefault()
           onDrop(id)
+          handleActive.delete(id)
         },
       }
     }
@@ -399,12 +426,12 @@ export const dnd: SpliceTreePlugin = {
       const right = `${rightInset + rightMargin}px`
       const base: Record<string, any> = { position: 'absolute', left, right, pointerEvents: 'none' }
       if (ghostPos === DropPosition.BEFORE) {
-        return { 'style': { ...base, top: `${ghostTop}px`, height: '2px', background: 'var(--vp-code-color)', borderRadius: '2px' }, 'data-drop-position': -1 }
+        return { 'style': { ...base, top: `${ghostTop}px`, height: '2px', background: color, borderRadius: '2px' }, 'data-drop-position': -1 }
       }
       if (ghostPos === DropPosition.AFTER) {
-        return { 'style': { ...base, top: `${ghostTop + ghostHeight}px`, height: '2px', background: 'var(--vp-code-color)', borderRadius: '2px' }, 'data-drop-position': 1 }
+        return { 'style': { ...base, top: `${ghostTop + ghostHeight}px`, height: '2px', background: color, borderRadius: '2px' }, 'data-drop-position': 1 }
       }
-      return { 'style': { ...base, top: `${ghostTop}px`, height: `${ghostHeight}px`, background: 'var(--vp-code-color)', opacity: 0.15, borderRadius: '4px' }, 'data-drop-position': 0 }
+      return { 'style': { ...base, top: `${ghostTop}px`, height: `${ghostHeight}px`, background: color, opacity: 0.15, borderRadius: '4px' }, 'data-drop-position': 0 }
     }
 
     return {

package/src/types.ts

@@ -26,4 +26,8 @@ export interface DndOptions {
   autoExpandOnDrop?: boolean
   /** 全局只读，禁用所有拖拽与排序 */
   readonly?: boolean
+  /** 统一占位（ghost）指示颜色，默认 '#4224da' */
+  color?: string
+  /** 仅在匹配的句柄元素上允许拖拽（如 '.handle'） */
+  handle?: string
 }