From bdd796abf228f776b892c2afd296ddcdfe6596b6 Mon Sep 17 00:00:00 2001 From: huiliangShen Date: Tue, 9 Jan 2024 10:16:50 +0800 Subject: [PATCH] fix(useDraggable): can not work well when parent element is scrollable (#3692) Co-authored-by: banruo --- packages/core/useDraggable/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts index f5b418e20ee..4653b63ad1e 100644 --- a/packages/core/useDraggable/index.ts +++ b/packages/core/useDraggable/index.ts @@ -147,8 +147,8 @@ export function useDraggable( const containerRect = container?.getBoundingClientRect?.() const targetRect = toValue(target)!.getBoundingClientRect() const pos = { - x: e.clientX - (container ? targetRect.left - containerRect!.left : targetRect.left), - y: e.clientY - (container ? targetRect.top - containerRect!.top : targetRect.top), + x: e.clientX - (container ? targetRect.left - containerRect!.left + container.scrollLeft : targetRect.left), + y: e.clientY - (container ? targetRect.top - containerRect!.top + container.scrollTop : targetRect.top), } if (onStart?.(pos, e) === false) return @@ -168,12 +168,12 @@ export function useDraggable( if (axis === 'x' || axis === 'both') { x = e.clientX - pressedDelta.value.x if (container) - x = Math.min(Math.max(0, x), containerRect!.width - targetRect!.width) + x = Math.min(Math.max(0, x), containerRect!.width + container.scrollLeft - targetRect!.width) } if (axis === 'y' || axis === 'both') { y = e.clientY - pressedDelta.value.y if (container) - y = Math.min(Math.max(0, y), containerRect!.height - targetRect!.height) + y = Math.min(Math.max(0, y), containerRect!.height + container.scrollTop - targetRect!.height) } position.value = { x,