vue3-sortable

Minimal, kind-of opinionated, Vue 3 sortable list component.

Developed for Pigments app.

Check out the demo folder.

Slots

#item - Receives the v-for directive item as a prop.

Props

modelValue

Type: Array
Required: true

The list of items that need to be sorted.

direction

Type: String
Required: false
Default: vertical
Values: [vertical, horizontal]

The direction of the sortable.

handle

Type: String
Required: false
Default: null

CSS class selector used as a drag handle. If the handle is not provided, the item can be moved from anywhere.

itemClass

Type: String
Required: false
Default: null

CSS class applied to the items.

animationDuration

Type: Number
Required: false
Default: 200

Reorder animation duration, in ms.

animationEasing

Type: String
Required: false
Default: ease

Reorder animation easing, any CSS transition accepted.

autosScrollEnabled

Type: Boolean
Required: false
Default: true

Whether to auto-scroll when near the edges of the list, when overflow is present.

disabled

Type: Boolean
Required: false
Default: true

Disable the sortable.

Emits

update:modelValue

drag-start

Parameters:

• index - The initial index of the dragged element.

drag-end

• oldIndex - The initial index of the dragged element.
• newIndex - The final index of the dragged element.
• value - The reordered list.

index-change

Triggers when the dragged item index changes.

• oldIndex - The initial index of the dragged element.
• newIndex - The final index of the dragged element.