useDragControls
Usually, dragging is initiated by pressing down on a motion
component with a drag
prop and then moving the pointer.
For some use-cases, for example clicking at an arbitrary point on a video scrubber, we might want to initiate that dragging from a different element.
With useDragControls
, we can create a set of controls to manually start dragging from any pointer event.
Usage
Import useDragControls
from Motion:
useDragControls
returns drag controls that can be passed to a draggable motion
component:
Now we can start a drag session from another any element's onPointerDown
event via the start
method.
Touch support
To support touch screens, the triggering element should have the touch-action: none
style applied.
Snap to cursor
By default, the drag gesture will only apply changes to the pointer position.
We can also make the motion
component immediately snap to the cursor by passing snapToCursor: true
to the start
method.
Disable automatic drag
With this configuration, the motion
component will still automatically start a drag gesture when it receives a pointerdown
event itself.
We can stop this behaviour by passing it a dragListener={false}
prop.
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!