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
+}