DragData
Contains data associated with a drag operation, including transferable and site-local information.
dataTransfer
propertyString-based key-value pairs to be transferred with the drag event.
| Type | Record |
siteLocalData
propertyData that remains local to the site and is not transferred via the drag event's DataTransfer object.
| Type | Record |
DragEventFn
Callback function executed during a drag event.
Parameters
params | DragEventParams (docs) |
Returns
void
DragEventParams
Arguments passed during a drag event lifecycle.
dragElement
propertyThe HTML element currently being dragged.
| Type | HTMLElement |
position
propertyCurrent cursor position during the drag.
| Type | DragPosition |
state
propertyCurrent drag state data.
| Type | DragData |
DragMoveState
Describes the final state of a drag-and-drop move operation.
dragElement
propertyElement that was being dragged.
| Type | HTMLElement |
dropElement
propertyElement into which the drag was dropped.
| Type | HTMLElement |
isKeyboard
propertyIndicates if the drag was initiated via keyboard.
Type
boolean
leftHalf
propertyTrue if the drop occurred in the left half of the element.
Type
boolean
rect
propertyBounding rectangle of the drop target.
| Type | DOMRect |
topHalf
propertyTrue if the drop occurred in the top half of the element.
Type
boolean
x
propertyX coordinate of the drop.
Type
number
y
propertyY coordinate of the drop.
Type
number
DragPlaceholderFn
Function to render the drag placeholder UI. This UI is rendered in isolation and does not respond to app state changes.
Parameters
params | DragPlaceholderParams (docs) |
Returns
ReactNode
DragPosition
Represents the current pointer position during a drag operation.
x
propertyClient X coordinate.
Type
number
y
propertyClient Y coordinate.
Type
number
DropEventFn
Fired when a drop action is finalized and the dragged element is released over a drop zone.
Parameters
params | DropEventParams (docs) |
Returns
void
DropEventParams
Represents the full context passed to the drop event handler.
dragElement
propertyThe HTML element that was dragged.
| Type | HTMLElement |
dropElement
propertyThe HTML element onto which the drop occurred.
| Type | HTMLElement |
moveState
propertyDetails the last-known drag position and target info before drop.
| Type | DragMoveState |
state
propertyThe drag data at the time of drop.
| Type | DragData |
UseRowDragParams
Parameters for configuring drag behavior using a React hook.
announceDragEnd
propertyScreen reader message to announce drag end.
Type
string
announceDragStart
propertyScreen reader message to announce drag start.
Type
string
dragInstructions
propertyAccessible label describing how to perform the drag operation.
Type
string
getDragData
propertyFunction to compute the drag payload when dragging begins.
| Type | GetDragDataFn |
keyActivate
propertyKeyboard key used to initiate drag mode.
Type
string
keyDrop
propertyKeyboard key used to execute the drop.
Type
string
keyNext
propertyKeyboard key used to move to the next drop zone.
Type
string
keyPrev
propertyKeyboard key used to move to the previous drop zone.
Type
string
onDragEnd
propertyCalled at the end of a drag operation, regardless of drop.
| Type | DragEventFn |
onDragMove
propertyInvoked frequently as the drag position updates.
| Type | DragEventFn |
onDragStart
propertyCalled at the beginning of a drag operation.
| Type | DragEventFn |
onDrop
propertyTriggered when the drag results in a drop.
| Type | DropEventFn |
placeholder
propertyFunction to generate placeholder content for the drag preview.
placeholderOffset
propertyOffset [x, y] in pixels from the cursor position for rendering the drag placeholder.
No properties