From 5de843553686d4811f15f3b246a8dd96a29e597d Mon Sep 17 00:00:00 2001 From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com> Date: Tue, 2 Apr 2024 17:30:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8B=96=E6=8B=BD=E9=99=90=E5=AE=9A=E5=8C=BA?= =?UTF-8?q?=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/renderer/src/scripts/draggable.ts | 45 ++++++++++++------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/blossom-editor/src/renderer/src/scripts/draggable.ts b/blossom-editor/src/renderer/src/scripts/draggable.ts index 013d153d..5ac6a73a 100644 --- a/blossom-editor/src/renderer/src/scripts/draggable.ts +++ b/blossom-editor/src/renderer/src/scripts/draggable.ts @@ -1,14 +1,21 @@ import { onBeforeUnmount, onMounted, watchEffect } from 'vue' import type { Ref } from 'vue' +/** + * 元素拖拽 + * @param targetRef 拖拽时移动的元素 + * @param dragRef 拖拽时拖动的元素 + * @param regionRef 元素可以拖拽的范围 + */ export const useDraggable = ( targetRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>, + regionRef?: Ref<HTMLElement | undefined> // draggable: ComputedRef<boolean> ) => { let transform = { offsetX: 0, - offsetY: 0, + offsetY: 0 } const onMousedown = (e: MouseEvent) => { @@ -22,27 +29,33 @@ export const useDraggable = ( const targetWidth = targetRect.width const targetHeight = targetRect.height - const clientWidth = document.documentElement.clientWidth - const clientHeight = document.documentElement.clientHeight + let clientWidth = document.documentElement.clientWidth + let clientHeight = document.documentElement.clientHeight + let minLeft = -targetLeft + offsetX + let minTop = -targetTop + offsetY + + if (regionRef) { + console.log(regionRef.value!.getBoundingClientRect()) + const rect = regionRef.value!.getBoundingClientRect() + clientWidth = rect.width + rect.x + clientHeight = rect.height + rect.y + minLeft += rect.x + minTop += rect.y + } else { + clientWidth = document.documentElement.clientWidth + clientHeight = document.documentElement.clientHeight + } - const minLeft = -targetLeft + offsetX - const minTop = -targetTop + offsetY const maxLeft = clientWidth - targetLeft - targetWidth + offsetX const maxTop = clientHeight - targetTop - targetHeight + offsetY const onMousemove = (e: MouseEvent) => { - const moveX = Math.min( - Math.max(offsetX + e.clientX - downX, minLeft), - maxLeft - ) - const moveY = Math.min( - Math.max(offsetY + e.clientY - downY, minTop), - maxTop - ) + const moveX = Math.min(Math.max(offsetX + e.clientX - downX, minLeft), maxLeft) + const moveY = Math.min(Math.max(offsetY + e.clientY - downY, minTop), maxTop) transform = { offsetX: moveX, - offsetY: moveY, + offsetY: moveY } targetRef.value!.style.transform = `translate(${moveX}px, ${moveY}px)` } @@ -71,7 +84,7 @@ export const useDraggable = ( onMounted(() => { watchEffect(() => { // if (draggable.value) { - onDraggable() + onDraggable() // } else { // offDraggable() // } @@ -81,4 +94,4 @@ export const useDraggable = ( onBeforeUnmount(() => { offDraggable() }) -} \ No newline at end of file +}