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

Developed for Pigments app.

Check out the demo folder.

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

Type: Array
Required: true

The list of items that need to be sorted.

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

The direction of the sortable.

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.

Type: String
Required: false
Default: null

CSS class applied to the items.

Type: Number
Required: false
Default: 200

Reorder animation duration, in ms.

Type: String
Required: false
Default: ease

Reorder animation easing, any CSS transition accepted.

Type: Boolean
Required: false
Default: true

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

Type: Boolean
Required: false
Default: true

Disable the sortable.

• index - The initial index of the dragged element.

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

Triggers when the dragged item index changes.

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