Component size, gzipped: 33kb
Drag and Drop List
Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.
When to use
- When a user wants to change a collection order.
Accessibility
tab
andshift+tab
to focus itemsspace
tolift
or drop the itemj
orarrow down
to move the lifted item downk
orarrow up
to move the lifted item upescape
to cancel the lift and return the item to its initial position
This component also supports iOS and Android browsers and screen readers.
Examples
Drag and Drop with varying heights
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec ornare.
- Morbi malesuada id ante ac tincidunt. Phasellus at varius enim, fringilla pretium lorem. Integer placerat, est in aliquam tempus, ex urna hendrerit quam, eu sagittis nulla lorem eu magna.
- Morbi nibh nunc.
- Nunc consequat erat id ante mollis tincidunt in a nulla.
API
Dnd List props
Name | Type | Description |
---|---|---|
items | array | The total number of items to display. |
onChange | function | MovableLists onChange handler. |
overrides | custom | Lets you customize all aspects of the component. |
removable | boolean | Indicates if items can be removed from the list. |
removableByMove | boolean | Indicates if items can be removed from the list by dnd outside of the list. |
Dnd List exports
You can import this module like so:
import {arrayMove} from 'baseui/dnd-list'
It exports the following components or utility functions: