Drag and drop

The drag and drop component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts.

Note: This drag and drop implementation lives in its own package at @patternfly/react-drag-drop!

Sorting examples

one

two

three

one

two

three

four

five

six

DragDropSortProps extends dnd-kit's props which may be viewed at https://docs.dndkit.com/api-documentation/context-provider#props.
*required
Name	Type	Default	Description
itemsrequired	DraggableObject[]		Sorted array of draggable objects
children	React.ReactElement<any>		Custom defined content wrapper for draggable items. By default, draggable items are wrapped in a styled div. Intended to be a 'DataList' or 'DualListSelectorList' without children.
onDrag	(event: DragDropSortDragStartEvent, oldIndex: number) => void	() => {}	Callback when use begins dragging a draggable object
onDrop	(event: DragDropSortDragEndEvent, items: DraggableObject[], oldIndex?: number, newIndex?: number) => void	() => {}	Callback when user drops a draggable object
overlayProps	any		Additional classes to apply to the drag overlay
variant	'default' \| 'DataList' \| 'DualListSelectorList'	'default'	The variant determines which component wraps the draggable object. Default variant wraps the draggable object in a div. DataList variant wraps the draggable object in a DataListItem DualListSelectorList variant wraps the draggable objects in a DualListSelectorListItem and a div.pf-c-dual-list-selector__item-text element

*required
Name	Type	Description
contentrequired	React.ReactNode	Content rendered in the draggable object
idrequired	string \| number	Unique id of the draggable object
props	any	Props spread to the rendered wrapper of the draggable object