@patternfly/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
47 lines (35 loc) • 1.17 kB
Markdown
id: Drag and drop
section: components
propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
title: Drag and drop
deprecated: true
import { useState } from 'react';
You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.
```ts noLive
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
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
```ts file="./DragDropBasic.tsx"
```
### Multiple lists
```ts file="./DragDropMultipleLists.tsx"
```