OrderList

Drag / button / Alt+arrow reorder

A list whose order is the setting — a playlist, a priority list, the columns of a table. To move items between two lists, use PickList.

Basic

• ⋮⋮第1話 プロローグ
• ⋮⋮第2話 運命の出会い
• ⋮⋮第3話 フラグの立たない
• ⋮⋮第4話 冴えない彼女

drag, ↑ ↓ buttons, or focus a row and Alt+↑/↓

<script setup lang="ts">
import { ref } from "vue";
import { BlessOrderList } from "blessing-ui";
const eps = ref([
  "第1話 プロローグ",
  "第2話 運命の出会い",
  "第3話 フラグの立たない",
  "第4話 冴えない彼女",
]);
</script>

<template>
  <div class="col" style="max-width: 420px">
    <BlessOrderList v-model="eps" />
    <small>drag, ↑ ↓ buttons, or focus a row and Alt+↑/↓</small>
  </div>
</template>

• Three ways to move: drag, the ↑ ↓ buttons, or focus a row and press Alt+↑ / Alt+↓. Each move is announced ("Moved to position 2 of 5") and focus follows the item.
• Pass rowKey when items have an id, so rows keep their state (an open menu, an input) as they move.
• :buttons="false" hides the buttons; keyboard and drag still work.

Usage

import { BlessOrderList } from "blessing-ui";

API

Props

Name	Type	Default	Description
rowKey	((item: T, index: number) => string | number)	—
label	string	"Reorder"
buttons	boolean	true	hide the ↑ ↓ buttons (drag only)
modelValue	T[]	[]

Events

Name	Payload	Description
move	[from: number, to: number]
update:modelValue	[value: T[]]

Slots

Name	Scope	Description
default	{ item: T; index: number; }