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.

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 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 sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector:

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