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".
- item-0
- item-1
- item-2
- item-3
- item-4
- item-5
- item-6
- item-7
- item-8
- item-9
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".
Multiple drop zone demos
To enable multiple drop zones, wrap the component with <DragDropContainer>, place one or more <Droppable> components within the container, and define the variant property on all components. A collection of all draggable items should be passed to <DragDropContainer>, and each <Droppable> should be passed their respective draggable items.
<Droppable> will create the component's usual children internally based on the items property, so children should not be passed where the <Droppable> is defined.
To avoid a wrapping div inserted by <Droppable>, pass the desired container element to the wrapper property.
Data list
To enable multiple drop zones with <DataList> components, place one or more <Droppable> within <DragDropContainer> and define the variant on all components as "DataList".
group 1
- item-0
- item-1
- item-2
- item-3
- item-4
group 2
- item-5
- item-6
- item-7
- item-8
- item-9
Dual list selector
To enable multiple drop zones in a <DualListSelector>, wrap the <DualListSelector> component with <DragDropContainer>, and then include a <Droppable> component within each pane. Both <DragDropContainer> and <Droppable> should define the variant property 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 |
| 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
| Name | Type | Default | 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 |