fix(use-draggable): persist transform position across renders

[wingkwong]

Closes #6283

📝 Description

• Fix draggable modal position resetting to center when starting a new drag after previous drag
• Change transform from a regular variable to useRef to persist position across renders
• Add effect to reset transform when target element changes (modal close/reopen)

⛳️ Current behavior (updates)

• Open a draggable modal
• Drag it to the left, release
• Drag it to the right
• Jump to center

🚀 New behavior

• Open a draggable modal
• Drag it to the left, release
• Drag it to the right - continue from current position, not jump to center
• Close and reopen modal - should start from center position again

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: dbb5212

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@heroui/use-draggable	Patch
@heroui/modal	Patch
@heroui/drawer	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
heroui	Ready	Preview, Comment	Mar 6, 2026 8:02am
heroui-sb	Ready	Preview, Comment	Mar 6, 2026 8:02am

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@6287

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@6287

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@6287

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@6287

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@6287

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@6287

@heroui/button

npm i https://pkg.pr.new/@heroui/button@6287

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@6287

@heroui/card

npm i https://pkg.pr.new/@heroui/card@6287

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@6287

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@6287

@heroui/code

npm i https://pkg.pr.new/@heroui/code@6287

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@6287

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@6287

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@6287

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@6287

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@6287

@heroui/form

npm i https://pkg.pr.new/@heroui/form@6287

@heroui/image

npm i https://pkg.pr.new/@heroui/image@6287

@heroui/input

npm i https://pkg.pr.new/@heroui/input@6287

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@6287

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@6287

@heroui/link

npm i https://pkg.pr.new/@heroui/link@6287

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@6287

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@6287

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@6287

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@6287

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@6287

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@6287

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@6287

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@6287

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@6287

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@6287

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@6287

@heroui/select

npm i https://pkg.pr.new/@heroui/select@6287

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@6287

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@6287

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@6287

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@6287

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@6287

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@6287

@heroui/table

npm i https://pkg.pr.new/@heroui/table@6287

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@6287

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@6287

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@6287

@heroui/user

npm i https://pkg.pr.new/@heroui/user@6287

@heroui/react

npm i https://pkg.pr.new/@heroui/react@6287

@heroui/system

npm i https://pkg.pr.new/@heroui/system@6287

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@6287

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@6287

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@6287

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@6287

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@6287

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@6287

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@6287

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@6287

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@6287

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@6287

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@6287

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@6287

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@6287

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@6287

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@6287

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@6287

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@6287

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@6287

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@6287

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@6287

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@6287

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@6287

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@6287

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@6287

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@6287

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@6287

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@6287

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@6287

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@6287

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@6287

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@6287

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@6287

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@6287

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@6287

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@6287

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@6287

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@6287

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@6287

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@6287

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@6287

commit: af43e49