8000 fix(useDraggable): can not work well when parent element is scrollabl… · vueuse/vueuse@bdd796a · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit bdd796a

Browse files
huiliangShenbanruo
huiliangShen
and
banruo
authored
fix(useDraggable): can not work well when parent element is scrollable (#3692)
Co-authored-by: banruo <shl@dataqin.com>
1 parent a7460fc commit bdd796a

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

‎packages/core/useDraggable/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ export function useDraggable(
147147
const containerRect = container?.getBoundingClientRect?.()
148148
const targetRect = toValue(target)!.getBoundingClientRect()
149149
const pos = {
150-
x: e.clientX - (container ? targetRect.left - containerRect!.left : targetRect.left),
151-
y: e.clientY - (container ? targetRect.top - containerRect!.top : targetRect.top),
150+
x: e.clientX - (container ? targetRect.left - containerRect!.left + container.scrollLeft : targetRect.left),
151+
y: e.clientY - (container ? targetRect.top - containerRect!.top + container.scrollTop : targetRect.top),
152152
}
153153
if (onStart?.(pos, e) === false)
154154
return
@@ -168,12 +168,12 @@ export function useDraggable(
168168
if (axis === 'x' || axis === 'both') {
169169
x = e.clientX - pressedDelta.value.x
170170
if (container)
171-
x = Math.min(Math.max(0, x), containerRect!.width - targetRect!.width)
171+
x = Math.min(Math.max(0, x), containerRect!.width + container.scrollLeft - targetRect!.width)
172172
}
173173
if (axis === 'y' || axis === 'both') {
174174
y = e.clientY - pressedDelta.value.y
175175
if (container)
176-
y = Math.min(Math.max(0, y), containerRect!.height - targetRect!.height)
176+
y = Math.min(Math.max(0, y), containerRect!.height + container.scrollTop - targetRect!.height)
177177
}
178178
position.value = {
179179
x,

0 commit comments

Comments
 (0)
0