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.

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.

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 stateless 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

Overrides

Additionally, you can fully customize any part of the Drag and Drop List through the overrides prop. The Drag and Drop List consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

  • Grab
    Item 1
  • Grab
    Item 2
  • Grab
    Item 3
  • Grab
    Item 4

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

List API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful List API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful List Container API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>