【Vue.js】リストをドラッグ＆ドロップで並び替える方法｜SortableJSとの連携例

# Vue 3 用（@next を付ける。付けないと Vue 2 向けの版が入る）
npm i -S vuedraggable@next

<script setup>
import { ref } from 'vue'
import draggable from 'vuedraggable'

// 各項目に、固有の id を持たせる
const tasks = ref([
  { id: 1, title: 'タスクA' },
  { id: 2, title: 'タスクB' },
  { id: 3, title: 'タスクC' }
])
</script>

<template>
  <!-- v-model で配列と結びつける。item-key は必須 -->
  <draggable v-model="tasks" item-key="id" tag="ul">
    <template #item="{ element, index }">
      <li>{{ index + 1 }}. {{ element.title }}</li>
    </template>
  </draggable>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import draggable from 'vuedraggable'

const tasks = ref([
  { id: 1, title: 'タスクA' },
  { id: 2, title: 'タスクB' },
  { id: 3, title: 'タスクC' }
])
const message = ref('')                                   // 読み上げ用のメッセージ
let lastSavedIds = tasks.value.map((task) => task.id)     // 最後に保存できた並び

// 並び順をサーバーに保存する。失敗したら、元の並びに戻す
async function saveOrder() {
  const ids = tasks.value.map((task) => task.id)
  try {
    const res = await fetch('/api/save-order', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ order: ids })
    })
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    lastSavedIds = ids
  } catch (error) {
    tasks.value = lastSavedIds.map((id) => tasks.value.find((task) => task.id === id))
    message.value = '保存に失敗しました。元の並びに戻しました。'
  }
}

// ドラッグができない人のために、ボタンでも動かせるようにする
async function moveItem(index, delta) {
  const target = index + delta
  if (target < 0 || target >= tasks.value.length) return

  const list = [...tasks.value]
  const [item] = list.splice(index, 1)
  list.splice(target, 0, item)
  tasks.value = list
  message.value = `「${item.title}」を${target + 1}番目に移動しました。`

  // DOM の並びが変わるとフォーカスが外れることがあるので、押したボタンに戻す
  await nextTick()
  document.getElementById(`${delta < 0 ? 'up' : 'down'}-${item.id}`)?.focus()

  saveOrder()
}
</script>

<template>
  <draggable
    v-model="tasks"
    item-key="id"
    tag="ul"
    handle=".handle"
    ghost-class="ghost"
    :animation="150"
    @change="saveOrder"
  >
    <template #item="{ element, index }">
      <li class="task">
        <!-- ドラッグできる部分。装飾なので、読み上げからは外す -->
        <span class="handle" aria-hidden="true">⠿</span>
        <span class="title">{{ index + 1 }}. {{ element.title }}</span>

        <button
          :id="`up-${element.id}`"
          type="button"
          :aria-label="`${element.title}を上へ移動`"
          :aria-disabled="index === 0"
          @click="moveItem(index, -1)"
        >↑</button>
        <button
          :id="`down-${element.id}`"
          type="button"
          :aria-label="`${element.title}を下へ移動`"
          :aria-disabled="index === tasks.length - 1"
          @click="moveItem(index, 1)"
        >↓</button>
      </li>
    </template>
  </draggable>

  <!-- 移動の結果を、読み上げソフトに伝える -->
  <p role="status">{{ message }}</p>
</template>

<style scoped>
.task { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid #ddd; }
.handle { cursor: grab; user-select: none; }
.title { flex: 1; }
.ghost { opacity: 0.4; background: #e3f2fd; }       /* ドラッグ中の位置を示す */
button[aria-disabled="true"] { opacity: 0.4; }
</style>