Draggable
Drag and drop components using @dnd-kit/react. Includes draggable, droppable, and sortable functionality with hooks.
Basic Drag & Drop
Drag fields from the source to the drop zone. The drop zone shows an active state when fields can be dropped.
Drop (fields) in this area to (add) (items)
Border highlights when you can drop here
Installation
pnpm dlx shadcn@latest add https://blok.sitecore.com/r/draggable.jsonUsage
Examples
The following are examples of our draggable components.
Basic Drag and Drop
Basic Drag & Drop
Drag fields from the source to the drop zone. The drop zone shows an active state when fields can be dropped.
Drop (fields) in this area to (add) (items)
Border highlights when you can drop here
Custom Handle
Custom Drag Handle
Drag fields using the grip icon handle only. Other parts of the item (labels, dropdowns, buttons) are interactive and won't trigger dragging.
Tip: Only the grip handle (⋮⋮) on the left side initiates dragging.
You can click on labels, names, and action buttons without triggering a drag.
Drag, Drop & Sort
Drag, Drop & Sort
Drag fields between panels. The drop zone shows an active state when fields can be dropped. After dropping, fields transform to show editable properties.
Drop (fields) in this area to (build) (form)
Border highlights when you can drop here