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 about the process, visit our about page or our Beta components page on GitHub.
You can use the DragDrop component to move items in or between lists. The DragDrop component should contain Droppable components which contain Draggable components.
import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
const DragDropCodeSample: React.FunctionComponent = () => (
<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
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
