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

Vue.jsでリストの順序をユーザーが自由に並び替えられるようにしたい場合、ドラッグ＆ドロップの仕組みを導入するのが効果的です。特にUIを改善したい管理画面やToDoリストなどで役立ちます。本記事では、軽量なライブラリ「SortableJS」を使って、Vue.jsのリスト要素を簡単に並び替える実装方法を紹介します。

SortableJSのインストール

まずはSortableJSをインストールします。npmを使用して以下のコマンドを実行してください。

npm install sortablejs

vuedraggableの導入

Vue.jsとSortableJSを統合するためには、「vuedraggable」というラッパーコンポーネントが便利です。こちらもnpmでインストールします。

npm install vuedraggable

基本的な実装例

以下は、簡単なリストをドラッグ＆ドロップで並び替えるVueコンポーネントの例です。

<template>
  <div>
    <draggable v-model="items" @end="onDragEnd">
      <div v-for="(item, index) in items" :key="item">
        {{ index + 1 }}. {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['タスクA', 'タスクB', 'タスクC']
    }
  },
  methods: {
    onDragEnd() {
      console.log('新しい順序:', this.items)
    }
  }
}
</script>

並び替え結果の保存処理

リストの順序変更後にバックエンドへ順番を保存したい場合は、onDragEnd()内でAPIを呼び出す処理を追加します。たとえばaxiosを使って送信する場合は以下のようにします。

onDragEnd() {
  axios.post('/api/save-order', {
    order: this.items
  }).then(() => {
    console.log('保存完了')
  })
}

まとめ

Vue.jsでリストの並び替え機能を実装するには、SortableJSとvuedraggableの組み合わせが非常に便利です。わずかなコードで直感的なUIが実現でき、ユーザー体験の向上にも繋がります。業務アプリケーションや管理画面などの開発にもぜひ活用してみてください。