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

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' \| '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

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
	.pf-v6-c-draggable	--pf-v6-c-draggable--Cursor	auto
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--Cursor	grabbing
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-draggable--m-dragging--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--BackgroundColor	transparent
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--after--BorderWidth	1px
--pf-v6-c-draggable--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-draggable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--after--BorderRadius	6px
--pf-v6-c-draggable--m-dragging--after--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-drag-outside--Cursor	not-allowed
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-drag-outside--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-draggable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-draggable.pf-m-dragging	--pf-v6-c-draggable--Cursor	grabbing
--pf-v6-c-draggable--Cursor --pf-v6-c-draggable--m-dragging--Cursor grabbing
	.pf-v6-c-draggable.pf-m-drag-outside	--pf-v6-c-draggable--m-dragging--Cursor	not-allowed
--pf-v6-c-draggable--m-dragging--Cursor --pf-v6-c-draggable--m-drag-outside--Cursor not-allowed
	.pf-v6-c-draggable.pf-m-drag-outside	--pf-v6-c-draggable--m-dragging--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-draggable--m-dragging--after--BorderColor --pf-v6-c-draggable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-droppable	--pf-v6-c-droppable--before--BackgroundColor	transparent
	.pf-v6-c-droppable	--pf-v6-c-droppable--before--Opacity	0
	.pf-v6-c-droppable	--pf-v6-c-droppable--after--BorderWidth	0
	.pf-v6-c-droppable	--pf-v6-c-droppable--after--BorderColor	transparent
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--before--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-droppable--m-dragging--before--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--before--Opacity	.6
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--after--BorderWidth	1px
--pf-v6-c-droppable--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-droppable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--after--BorderRadius	6px
--pf-v6-c-droppable--m-dragging--after--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-drag-outside--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-droppable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--before--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-droppable--before--BackgroundColor --pf-v6-c-droppable--m-dragging--before--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--before--Opacity	.6
--pf-v6-c-droppable--before--Opacity --pf-v6-c-droppable--m-dragging--before--Opacity .6
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--after--BorderWidth	1px
--pf-v6-c-droppable--after--BorderWidth --pf-v6-c-droppable--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-droppable--after--BorderColor --pf-v6-c-droppable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-droppable.pf-m-drag-outside	--pf-v6-c-droppable--m-dragging--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-droppable--m-dragging--after--BorderColor --pf-v6-c-droppable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b

Edit this page on GitHub