Sortable

Drag-and-drop reorderable list with up and down buttons. Size prop: xs, sm, md, lg, xl.

Jump to API reference

Import

Vue
import { UiSortable } from '@ziyarago/ui/vue'

Sizes

Arrive in Jeddah
Umrah rituals
Arrive in Jeddah
Umrah rituals
Arrive in Jeddah
Umrah rituals
Arrive in Jeddah
Umrah rituals
Arrive in Jeddah
Umrah rituals
Vue
<UiSortable
  size="xs"
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }]"
 />

<UiSortable
  size="sm"
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }]"
 />

<UiSortable
  size="md"
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }]"
 />

<UiSortable
  size="lg"
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }]"
 />

<UiSortable
  size="xl"
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }]"
 />

Itinerary order

Arrive in Jeddah
Umrah rituals
Train to Madinah
Visit Quba Mosque
Vue
<UiSortable
  :items="[{ id: 1, label: 'Arrive in Jeddah' }, { id: 2, label: 'Umrah rituals' }, { id: 3, label: 'Train to Madinah' }, { id: 4, label: 'Visit Quba Mosque' }]"
 />

API reference

Drag-and-drop reorderable list with grip handles and up/down buttons.

Props

PropType and valuesDefaultDescription
itemsrequired{ id?: string | number; label: string }[]'[]'Items in current order. id is used as the key, falling back to the index.
render(item, index) => VNode—Custom item renderer. Defaults to the bold item label.
sizexssmmdlgxl'md'Row padding, gap and font size.

Events

Vue: @name. React: onName.

changeCalled with the reordered items array after a drop or up/down click.

Notes

  • Controlled: the parent must store the array from change and pass it back as items.
  • Keyboard-friendly reordering is available through the up/down buttons.