SortableList

TxSortableList renders a list of items and emits a reordered array when the user drags one item onto another. Use handle when only a dedicated drag handle should start reordering.

import { ref } from 'vue' const list = ref([ { id: 'one', title: 'One' }, { id: 'two', title: 'Two' }, { id: 'three', title: 'Three' }, { id: 'four', title: 'Four' }, ])

Basic Usage

SortableList

Demo will load when visible.

<template>
  <TxSortableList v-model="list">
    <template #item="{ item }">
      <div>{{ item.id }}</div>
    </template>
  </TxSortableList>
</template>

API

Props

Prop	Type	Default	Description
`modelValue`	`SortableListItem[]`	-	Ordered list data. Every item must provide a stable `id`.
`disabled`	`boolean`	`false`	Disables dragging and prevents reorder events.
`handle`	`boolean`	`false`	Requires drag start targets to be inside `[data-tx-sort-handle="true"]`.

Events

Event	Params	Description
`update:modelValue`	`(value: SortableListItem[])`	Emitted with the reordered item array after a valid drop.
`reorder`	`({ from, to, items })`	Emitted with source index, target index, and reordered items.