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
tabandshift+tabto focus itemsspacetoliftor drop the itemjorarrow downto move the lifted item downkorarrow upto move the lifted item upescapeto cancel the lift and return the item to its initial position
This component also supports iOS and Android browsers and screen readers.
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.
Overrides
Additionally, you can fully customize any part of the Drag and Drop List through the overrides prop. The Drag and Drop List consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:
- Item 1
- Item 2
- Item 3
- Item 4
Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!
List API
removable boolean
Set if the list items should be removable
items Array<Node> = []
Items (labels) to be rendered
ArrayNodeonChange function = () => undefined
Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case)
oldIndex number required newIndex number required => mixedoverrides object
Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required List { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Item { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required DragHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required CloseHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Label { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Stateful List API
initialState object = { items: [] }
Initial state populated into the component
items required ArrayNodestateReducer function = (type, nextState) => undefined
Reducer function to manipulate internal state updates.
function $Values{ change: "change" }, items required ArrayNode, items required ArrayNode => items required ArrayNoderemovable boolean
Set if the list items should be removable
onChange function
Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case)
newState required ArrayNodeoldIndex number required newIndex number required => mixedoverrides object
Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required List { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Item { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required DragHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required CloseHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Label { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Stateful List Container API
initialState object = { items: [] }
items required ArrayNodechildren function required
$Diffremovable boolean items required ArrayNodeonChange function required oldIndex number required newIndex number required => mixedoverrides Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required List { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Item { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required DragHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required CloseHandle { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required Label { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>$isDragged boolean required $isSelected boolean required $isRemovable boolean required , children required ArrayNode => Node