| | |
| | | * 拖拽手柄元素的选择器 |
| | | */ |
| | | handle?: string | HTMLElement | Ref<HTMLElement>; |
| | | |
| | | startPos?: { x?: number; y?: number }; |
| | | }; |
| | | |
| | | const getHandleElement = (handle: string | HTMLElement | Ref<HTMLElement>) => { |
| | |
| | | }; |
| | | |
| | | export const useDrag = (options: UseDragOptions = {}) => { |
| | | const { handle } = options; |
| | | 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) => { |
| | | // 如果设置了handle,则判断事件源是否是handle元素或其子元素 |
| | | if (handle) { |
| | |
| | | } |
| | | } |
| | | isDragging.value = true; |
| | | startPos.value = { |
| | | startPosRef.value = { |
| | | x: e.clientX - offset.value.x, |
| | | y: e.clientY - offset.value.y, |
| | | }; |
| | |
| | | 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, |
| | | }; |
| | | }; |
| | | |