Draggable
The draggable is an interactive element that can be “grabbed”, dragged, and dropped to another location. This lets users rearrange and/or organize items.
- Reordering a list
- Moving objects between lists
- To let users upload files, use File upload instead
How to use it
Default
The Draggable has a content area and a grip to communicate it can be dragged and dropped.
Bare
Borders can be removed using isBare prop.
Content
The Draggable content area can accept other components and text.
Disabled
The Draggable can be disabled to prevent interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.
Placeholder
A Placeholder is used to indicate where the Draggable will be placed when dropped.
Size
Can be default or compact in size. This changes the vertical padding.
Draggable list
Default
Use the list component to organize Draggable items into a vertical list.
Horizontal
Use isHorizontal to display items in a row.
Indicator
Use indicators to communicate where the Draggable will land between other items.
Dropzone
Default
The Dropzone allows users to designate an area as a drop target. This example uses dnd-kit.
Danger
Danger styling communicates that items dropped will be removed or deleted. This example uses dnd-kit.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-draggable
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Draggable, DraggableList, Dropzone } from '@zendeskgarden/react-draggable'
API
A Draggable component can be used independently from a DraggableList.
They follow this structure:
<DraggableList><DraggableList.Item><Draggable><Draggable.Grip /><Draggable.Content>{/* content */}</Draggable.Content></Draggable></DraggableList.Item>{/* other items */}</DraggableList>
The Dropzone component may or may not be a sibling to the Draggable component.
It follows this structure:
<Dropzone><Dropzone.Icon><Icon /></Dropzone.Icon><Dropzone.Message>{/* message */}</Dropzone.Message></Dropzone>
Draggable
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset box-shadow styling on focus | |
isBare | boolean | Removes borders | |
isCompact | boolean | Applies compact spacing | |
isDisabled | boolean | Disables the draggable | |
isGrabbed | boolean | Applies grab styling | |
isPlaceholder | boolean | Hides content and applies placeholder background styling | |
tag | any | Updates the element's HTML tag |
Draggable.Content
Extends HTMLAttributes<HTMLDivElement>
Draggable.Grip
Extends HTMLAttributes<HTMLDivElement>
Provides visual indication that a Draggable can be grabbed and moved.
DraggableList
Extends HTMLAttributes<HTMLUListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isHorizontal | boolean | Flows list items inline |
DraggableList.DropIndicator
Extends LiHTMLAttributes<HTMLLIElement>
Indicates the position where a DraggableList.Item being dragged will be inserted into a DraggableList.
DraggableList.Item
Extends LiHTMLAttributes<HTMLLIElement>
Nest an Item within a DraggableList component.
Dropzone
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isActive | boolean | Indicates a drop is possible during a drag | |
isDanger | boolean | Applies danger styling | |
isDisabled | boolean | Disables the dropzone | |
isHighlighted | boolean | Indicates a draggable is on a droppable area | |
isVertical | boolean | Aligns dropzone message content vertically | |
tag | any | Updates the element's HTML tag |
Dropzone.Icon
Extends HTMLAttributes<HTMLDivElement>
Nest a custom icon in Dropzone.Icon.
Dropzone.Message
Extends HTMLAttributes<HTMLParagraphElement>
Nest content within a Dropzone.Message to apply appropriate styles.