Skip to main contentPrimer

DragAndDrop

DragAndDrop adds support for the reordering of items in a list using drag and drop, as well as move dialogs.

Internal Component

This component is intended solely for use within GitHub and is not available for external use.
React
ready
Docs|Storybook|Source

Props

DragAndDrop

NameDefaultDescription
items Required
K[]

Array of ids and titles of the items

direction
DragAndDropDirection

Direction of the list, defaults to vertical

onDrop Required
(args: OnDropArgs<T>) => void

Callback called when a drop occurs

as
React.ElementType<any, keyof React.JSX.IntrinsicElements>

Component type to render for drag and drop container

renderOverlay Required
(item: K, index: number) => React.ReactNode

Render function for overlay

keyboardCodes
KeyboardCodes

Keyboard codes to use for drag and drop

enableTouch
boolean

Enabled touch for drag and drop. Only applies if the feature flag dnd_touch_enabled is enabled.

DragAndDropItem

NameDefaultDescription
index Required
number

The index of the list item

containerStyle
React.CSSProperties

Sx to apply to the container

hideTrigger
boolean

Whether or not to hide the trigger, only use when defining a custom trigger.

role
React.AriaRole

The role of the list item

as
React.ElementType<any, keyof React.JSX.IntrinsicElements>

Component type to render for drag and drop container

isDragOverlay
boolean

Whether or not the item is a drag overlay

itemClassName
string

Styling for the item nested inside the li (default) element

elementId
string

HTML id for the list item