Drag and drop

Beta

The drag and drop interaction can be used to reposition elements on screen into a layout that benefits the user. This gives the user more flexibility to arrange and/or group items without having to make code changes.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

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

Sorting examples

Basic drag and drop sorting

one

two

three

Multiple drop zones

group 1

one

two

three

group 2

four

five

six

Props

DragDropSort

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		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' \| 'defaultWithHandle' \| 'DataList' \| 'DualListSelectorList' \| 'TableComposable'	'default'	The variant determines which component wraps the draggable object. Default and defaultWithHandle varaints wrap the draggable object in a div. DataList vairant 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 TableComposable variant wraps the draggable objects in TODO

DraggableObject

*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

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub