DragHandle
The grip that drags an item in a sortable React Aria GridList, Table or Tree. Always pair dragging with a second way to reorder, such as NudgeButtons, for people who cannot drag.
- DragHandle
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, DragHandle
Home
Pricing
Blog
About
Contact
Dark theme, DragHandle
Home
Pricing
Blog
About
Contact
High contrast theme, DragHandle
Home
Pricing
Blog
About
Contact
UsageLink to the section Usage
import { DragHandle } from '@skribly/ui/actions'<GridListItem textValue={page.name}>
<DragHandle label={`Drag ${page.name}`} />
{page.name}
</GridListItem>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The handle fills the drag slot of the item, so React Aria gives it keyboard dragging (Enter to pick up, arrows to choose a place, Enter to drop, Escape to cancel) and reads the instructions and the drop position aloud.
- The target is 24px square even though the grip is smaller.
This demo runs through axe in all three themes on every test run. See what the tests check.