VerticalDraggableList

Drag all over me.

Example

Props

🕹️ standard props
items
{ id: string; name: string; }[]
An array of draggable items.
[]
class
string
Additional CSS classes for item containers.
''
🎨 style props
--vertical-draggable-list-item-padding
size
Defines the row padding.
8px
--vertical-draggable-list-default-pinned-items-background-color
color
Defines the background color for pinned items.
rgb(var(--global-color-background-400))
--vertical-draggable-list-default-pinned-items-border-radius
size
Defines the border radius for pinned items.
4px

Slots

itemSnippet

Custom rendering snippet for each draggable item.

Default content:

{item.name}

Available variables:

Name	Type	Description
item	{ id: string; name: string; }	The item being rendered.
index	number	The index of the item being rendered.

Events

onchangeOrder

Triggered when the order of items changes.

Attribute	Type	Description
items	{ id: string; name: string; }[]	The updated list of items in the new order.