UNPKG

@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
--- 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" ```