Skip to content

Drag and drop

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.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
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--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