Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
You can use DragDrop to move items in or between lists. DragDrops should contain Droppables which contain Draggables.
import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
<DragDrop> {/* DragDrop houses the context for dragging and dropping */}
<Droppable>
<Draggable>
You can put anything here! It will be wrapped in a styled div.
</Draggable>
<Draggable>
You can have as many Draggables as you like.
</Draggable>
</Droppable>
<Droppable> {/* You can also have many droppables! */}
<Draggable />
</Droppable>
</DragDrop>Note: Keyboard accessibility and screen reader accessibility are still in development.
Examples
Basic
item 0
item 1
item 2
item 3
item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
item 5
item 6
item 7
item 8
item 9
Multiple lists
item 0
item 1
item 2
item 3
item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14
Props
DragDrop
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Potentially Droppable and Draggable children | |
| onDrag | (source: DraggableItemPosition) => boolean | () => true | Callback for drag event. Return true to allow drag, false to disallow. |
| onDragMove | (source: DraggableItemPosition, dest?: DraggableItemPosition) => void | () => {} | Callback on mouse move while dragging. |
| onDrop | (source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean | () => false | Callback for drop event. Return true to allow drop, false to disallow. |
Draggable
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside DragDrop | |
| className | string | Class to add to outer div | |
| hasNoWrapper | boolean | false | Don't wrap the component in a div. Requires passing a single child. |
| style | No type info | {} |
Droppable
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside DragDrop | |
| className | string | Class to add to outer div | |
| droppableId | string | 'defaultId' | Id to be passed back on drop events |
| hasNoWrapper | boolean | false | Don't wrap the component in a div. Requires passing a single child. |
| zone | string | 'defaultZone' | Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page. |
DraggableItemPosition
| Name | Type | Default | Description |
|---|---|---|---|
| droppableIdrequired | string | Parent droppableId | |
| indexrequired | number | Index of item in parent Droppable |
View source on GitHub
