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

Drag and Drop stateful usage

Drag and Drop with removable items

Drag and Drop with varying heights

Drag and Drop with custom drag handle

Drag and Drop with label override

API

Stateful List API

initialState object = { items: [] }

Initial state populated into the component

items required ArrayNode

stateReducer function = (type, nextState) => undefined

Reducer function to manipulate internal state updates.

function
$Values{ change: "change" },
items required ArrayNode
,
items required ArrayNode
=>
items required ArrayNode

removable boolean

Set if the list items should be removable

removableByMove boolean

Set if the list items should be removable by dragging them far left or right

onChange function

Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case)

newState required ArrayNode
oldIndex number required
newIndex number required
targetRect required ClientRect
=> mixed

overrides object

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node
List { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node
Item { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node
DragHandle { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node
CloseHandle { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node
Label { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$isDragged boolean required
$isSelected boolean required
$isRemovable boolean required
$isRemovableByMove boolean required
$isOutOfBounds boolean required
$value required Node

DnD exports

You can import this module like so:

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

It exports the following components or utility functions: