Interface: UseDragOptions
Defined in: react/src/hooks/useDrag.ts:7
Properties
cursor?
optional cursor?: string;
Defined in: react/src/hooks/useDrag.ts:19
CSS cursor to show while dragging. Applied to the element itself.
onDrag?
optional onDrag?: (x, y, deltaX, deltaY, state) => void;
Defined in: react/src/hooks/useDrag.ts:37
Called on every move once the drag has started, with the pointer position relative to the element and how far it moved since the last call.
Parameters
| Parameter | Type | Description |
|---|---|---|
x | number | - |
y | number | - |
deltaX | number | - |
deltaY | number | - |
state | DragState | the whole drag, for anything the four numbers leave out — the pointer event and its modifier keys, most of all. |
Returns
void
onDragEnd?
optional onDragEnd?: (state) => void;
Defined in: react/src/hooks/useDrag.ts:47
Called when the pointer is released, only if the drag ever started.
Parameters
| Parameter | Type |
|---|---|
state | DragState |
Returns
void
onDragStart?
optional onDragStart?: (state) => void;
Defined in: react/src/hooks/useDrag.ts:45
Called once the pointer has moved past threshold, not on pointerdown.
Parameters
| Parameter | Type |
|---|---|
state | DragState |
Returns
void
pointerLock?
optional pointerLock?: boolean;
Defined in: react/src/hooks/useDrag.ts:28
Hide the pointer and read its movement directly, instead of following it around the screen.
See
DragOptions.pointerLock
Default
false
threshold?
optional threshold?: number;
Defined in: react/src/hooks/useDrag.ts:16
Pixels the pointer has to travel before the drag counts as one.
A click moves the pointer by a pixel or two, so without a threshold a double click reports a drag between the two presses.
Default
1