Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
107 lines (83 sloc) 2.68 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Basic from 'examples/dnd-list/basic.js'; import Stateless from 'examples/dnd-list/stateless.js'; import Removable from 'examples/dnd-list/removable.js'; import VaryingHeights from 'examples/dnd-list/varyingHeights.js'; import CustomDragHandle from 'examples/dnd-list/customDragHandle.js'; import OverrideLabel from 'examples/dnd-list/overrideLabel.js';

import Overrides from '../../components/overrides'; import {StatefulList} from 'baseui/dnd-list'; import * as ListExports from 'baseui/dnd-list';

export default Layout;

Drag and Drop List

Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.

When to use

  • When a user wants to change a collection order.


  • tab and shift+tab to focus items
  • space to lift or drop the item
  • j or arrow down to move the lifted item down
  • k or arrow up to move the lifted item up
  • escape to cancel the lift and return the item to its initial position

This component also supports iOS and Android browsers and screen readers.

<Example title="Drag and Drop with removable items" path="dnd-list/removable.js"

<Example title="Drag and Drop with varying heights" path="dnd-list/varyingHeights.js"

<Example title="Drag and Drop with custom drag handle" path="dnd-list/customDragHandle.js"

<Example title="Drag and Drop with label override" path="dnd-list/overrideLabel.js"


<Overrides name="Drag and Drop List" component={ListExports} renderExample={props => ( <StatefulList removable initialState={{items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']}} overrides={props.overrides} /> )} />

<API heading="List API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/dnd-list/list.js')} />

<API heading="Stateful List API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/dnd-list/stateful-list.js')} />

<API heading="Stateful List Container API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/dnd-list/stateful-list-container.js')} />

You can’t perform that action at this time.