Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Bare
      • Content
      • Disabled
      • Placeholder
      • Size
    • Draggable list
      • Default
      • Horizontal
      • Indicator
    • Dropzone
      • Default
      • Danger
    • Configuration
    • API
      • Draggable
      • DraggableList
      • Dropzone

    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.

    Table of Contents
    • How to use it
      • Default
      • Bare
      • Content
      • Disabled
      • Placeholder
      • Size
    • Draggable list
      • Default
      • Horizontal
      • Indicator
    • Dropzone
      • Default
      • Danger
    • Configuration
    • API
      • Draggable
      • DraggableList
      • Dropzone
    Used for this
    • Reordering a list
    • Moving objects between lists
    Not for this
    • 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.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Bare

    Borders can be removed using isBare prop.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Content

    The Draggable content area can accept other components and text.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    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.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Placeholder

    A Placeholder is used to indicate where the Draggable will be placed when dropped.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    Can be default or compact in size. This changes the vertical padding.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Draggable list

    Default

    Use the list component to organize Draggable items into a vertical list.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Horizontal

    Use isHorizontal to display items in a row.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Indicator

    Use indicators to communicate where the Draggable will land between other items.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Dropzone

    Default

    The Dropzone allows users to designate an area as a drop target. This example uses dnd-kit.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Danger

    Danger styling communicates that items dropped will be removed or deleted. This example uses dnd-kit.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.1.0•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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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.

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024