# Drag and drop

- React deprecated

You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.

    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

### Multiple lists