Component size, gzipped: 19kb

Drag and Drop List

Loading
API

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.

Accessibility

  • 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.

Examples

Drag and Drop basic usage

  • Grab
    Item 1
  • Grab
    Item 2
  • Grab
    Item 3
  • Grab
    Item 4
  • Grab
    Item 5
  • Grab
    Item 6

Drag and Drop stateful usage

  • Grab
    Item 1
  • Grab
    Item 2
  • Grab
    Item 3
  • Grab
    Item 4
  • Grab
    Item 5
  • Grab
    Item 6

Drag and Drop with removable items

  • Grab
    Item 1
  • Grab
    Item 2
  • Grab
    Item 3
  • Grab
    Item 4
  • Grab
    Item 5
  • Grab
    Item 6

Drag and Drop with varying heights

  • Grab
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Grab
    Donec ornare.
  • Grab
    Morbi malesuada id ante ac tincidunt. Phasellus at varius enim, fringilla pretium lorem. Integer placerat, est in aliquam tempus, ex urna hendrerit quam, eu sagittis nulla lorem eu magna.
  • Grab
    Morbi nibh nunc.
  • Grab
    Nunc consequat erat id ante mollis tincidunt in a nulla.

Drag and Drop with custom drag handle

  • Arrow Right
    Item 1
  • Arrow Right
    Item 2
  • Arrow Right
    Item 3
  • Arrow Right
    Item 4
  • Arrow Right
    Item 5
  • Arrow Right
    Item 6

Drag and Drop with label override

  • Grab
    Item 1
  • Grab
    Item 2
  • Grab
    Item 3
  • Grab
    Item 4
  • Grab
    Item 5
  • Grab
    Item 6

API

Dnd List props

Dnd List exports

You can import this module like so:

import {arrayMove} from 'baseui/dnd-list'

It exports the following components or utility functions: