From 7866aa30bd13dab1fc0662e1baf6675d0dc1b282 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 02 四月 2025 15:42:30 +0800
Subject: [PATCH] 修改意见
---
src/hooks/useDrag.ts | 60 ++++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 48 insertions(+), 12 deletions(-)
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
index f3b32d1..84e1153 100644
--- a/src/hooks/useDrag.ts
+++ b/src/hooks/useDrag.ts
@@ -1,18 +1,42 @@
+import type { Ref } from 'vue';
import { computed, ref } from 'vue';
export type UseDragOptions = {
- target: HTMLElement;
- onDrag: (e: MouseEvent) => void;
- onDragEnd: (e: MouseEvent) => void;
-};
-export const useDrag = () => {
+ /**
+ * 鎷栨嫿鎵嬫焺鍏冪礌鐨勯�夋嫨鍣�
+ */
+ handle?: string | HTMLElement | Ref<HTMLElement>;
+ startPos?: { x?: number; y?: number };
+};
+
+const getHandleElement = (handle: string | HTMLElement | Ref<HTMLElement>) => {
+ if (!handle) return null;
+ if (typeof handle === 'string') {
+ return document.querySelector(handle);
+ } else if (handle instanceof HTMLElement) {
+ return handle;
+ } else if (typeof handle === 'object' && 'value' in handle) {
+ return handle.value;
+ }
+ return null;
+};
+
+export const useDrag = (options: UseDragOptions = {}) => {
+ const { handle, startPos } = options;
const isDragging = ref(false);
- const startPos = ref({ x: 0, y: 0 });
- const offset = ref({ x: 0, y: 0 });
+ const startPosRef = ref({ x: 0, y: 0 });
+ const offset = ref({ x: startPos?.x ?? 0, y: startPos?.y ?? 0 });
const startDrag = (e: MouseEvent) => {
+ // 濡傛灉璁剧疆浜唄andle,鍒欏垽鏂簨浠舵簮鏄惁鏄痟andle鍏冪礌鎴栧叾瀛愬厓绱�
+ if (handle) {
+ const handleElement = getHandleElement(handle);
+ if (!handleElement?.contains(e.target as Node)) {
+ return;
+ }
+ }
isDragging.value = true;
- startPos.value = {
+ startPosRef.value = {
x: e.clientX - offset.value.x,
y: e.clientY - offset.value.y,
};
@@ -21,8 +45,8 @@
if (!isDragging.value) return;
offset.value = {
- x: e.clientX - startPos.value.x,
- y: e.clientY - startPos.value.y,
+ x: e.clientX - startPosRef.value.x,
+ y: e.clientY - startPosRef.value.y,
};
};
@@ -35,19 +59,31 @@
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
};
+ const handleStyle = computed(() => {
+ return handle
+ ? {
+ cursor: isDragging.value ? 'grabbing' : 'grab',
+ }
+ : {};
+ });
+
const style = computed(
() =>
({
position: 'absolute',
transform: `translate(${offset.value.x}px, ${offset.value.y}px)`,
- cursor: isDragging.value ? 'grabbing' : 'grab',
+ ...(handle
+ ? {}
+ : {
+ cursor: isDragging.value ? 'grabbing' : 'grab',
+ }),
} as any)
);
-
return {
isDragging,
startDrag,
style,
+ handleStyle,
};
};
--
Gitblit v1.9.3