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
NameTypeDefaultDescription
itemsrequiredDraggableObject[]Sorted array of draggable objects
childrenReact.ReactElementCustom 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
overlayPropsanyAdditional 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
NameTypeDefaultDescription
contentrequiredReact.ReactNodeContent rendered in the draggable object
idrequiredstring | numberUnique id of the draggable object
propsanyProps spread to the rendered wrapper of the draggable object

CSS variables

Expand or collapse columnSelectorVariableValue
.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--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--pf-v6-c-draggable--m-dragging--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--after--BorderRadius
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.pf-m-dragging--pf-v6-c-draggable--Cursor
grabbing
.pf-v6-c-draggable.pf-m-drag-outside--pf-v6-c-draggable--m-dragging--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-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--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--pf-v6-c-droppable--m-dragging--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--after--BorderRadius
6px
.pf-v6-c-droppable--pf-v6-c-droppable--m-drag-outside--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--before--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--before--Opacity
.6
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--after--BorderWidth
1px
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-droppable.pf-m-drag-outside--pf-v6-c-droppable--m-dragging--after--BorderColor
(In light theme) #b1380b
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.