feat(useDraggable): allowing calculations of bounds with fixed element (#3335)

linspw · web-flow · commit c08e5e09bac2 · 2023-08-25T13:41:33.000Z
diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
@@ -41,6 +41,13 @@ export interface UseDraggableOptions {
    */
   draggingElement?: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>
 
+  /**
+   * Element for calculating bounds (If not set, it will use the event's target).
+   *
+   * @default undefined
+   */
+  containerElement?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>
+
   /**
    * Handle that triggers the drag event
    *
@@ -107,6 +114,7 @@ export function useDraggable(
     initialValue,
     axis = 'both',
     draggingElement = defaultWindow,
+    containerElement,
     handle: draggingHandle = target,
   } = options
 
@@ -134,7 +142,8 @@ export function useDraggable(
       return
     if (toValue(exact) && e.target !== toValue(target))
       return
-    const rect = toValue(target)!.getBoundingClientRect()
+    const container = toValue(containerElement) ?? toValue(target)
+    const rect = container!.getBoundingClientRect()
     const pos = {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top,
