Info alert:Beta feature
Note: This drag and drop implementation lives in its own package at @patternfly/react-drag-drop!
Sorting demos
To enable drag and drop for compatible components, wrap the component with <DragDropSort>
, define the variant
property, and pass both the sortable items
and onDrop
callback to <DragDropSort>
. <DragDropSort>
will create the component's usual children
internally based on the items
property, so children
should not be passed to the wrapped component.
Drag and drop sortable data list
To enable reordering in a <DataList>
, wrap the <DataList>
component with <DragDropSort>
and define the variant
as "DataList".
Drag and drop sortable dual list selector
To enable reordering in a <DualListSelector>
pane wrap the <DualListSelectorList>
component with <DragDropSort>
and define the variant
as "DualListSelectorList".
Props
DragDropSort
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 |
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
Name | Type | Default | Description |
---|---|---|---|
contentrequired | React.ReactNode | Content rendered in the draggable object | |
idrequired | string | Unique id of the draggable object | |
props | any | Props spread to the rendered wrapper of the draggable object |
View source on GitHub