useDraggable
A React Hook that helps to make element draggable.
Demo
Try to drag the float element.
SourceDrag to move
X: 320, Y: 320
Drag to move (inner)
X: 10, Y: 10
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const draggable = useDraggable(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export type UseDraggableOptions = {
/**
* Whether to drag the element only when the pointer is exactly on the target element.
*
* @defaultValue false
*/
exact?: boolean
/**
* Whether to prevent the default behavior of the pointer event.
*
* @defaultValue false
*/
preventDefault?: boolean
/**
* Whether to stop the propagation of the pointer event.
*
* @defaultValue false
*/
stopPropagation?: boolean
/**
* Whether to capture the pointer event.
*
* @defaultValue true
*/
capture?: boolean
/**
* The element that should be dragged.
*
* @defaultValue target
*/
handle?: ElementTarget
/**
* The element that should be dragged.
*
* @defaultValue window
*/
draggingElement?: ElementTarget | GlobalTarget
/**
* The element that should contain the draggable element.
*
* @defaultValue undefined
*/
containerElement?: ElementTarget
/**
* The types of pointer events that should be handled.
*
* @defaultValue ['mouse', 'touch', 'pen']
*/
pointerTypes?: PointerType[]
/**
* The initial position of the draggable element.
*
* @defaultValue { x: 0; y: 0 }
*/
initialValue?: Position
/**
* The callback that is called when the dragging starts.
*/
onStart?: (position: Position, event: PointerEvent) => void | false
/**
* The callback that is called when the dragging moves.
*/
onMove?: (position: Position, event: PointerEvent) => void
/**
* The callback that is called when the dragging ends.
*/
onEnd?: (position: Position, event: PointerEvent) => void
/**
* The axis that the draggable element can be moved along.
*
* @defaultValue 'both'
*/
axis?: 'x' | 'y' | 'both'
/**
* Whether the draggable element is disabled.
*
* @defaultValue false
*/
disabled?: boolean
}
Returns
export type UseDraggableReturns = {
/**
* The x-coordinate of the draggable element.
*/
x: number
/**
* The y-coordinate of the draggable element.
*/
y: number
/**
* The style that should be applied to the draggable element.
*/
style: CSSProperties
/**
* The position of the draggable element.
*/
position: Position
/**
* Whether the draggable element is being dragged.
*/
isDragging: boolean
}
