【Vue.js】ドラッグ&ドロップで並べ替え

表示したリストをドラッグ＆ドロップで並べ替える方法をメモしておきます。

ライブラリは SortableJS の vue 版である Vue.Draggable を使います。
github.com

リストを表示する

先ずは単純にリストを表示するアプリを作りました。

App.vue です。

<template>
  <div id="app">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "aaa" },
        { id: 2, name: "bbb" },
        { id: 3, name: "ccc" },
        { id: 4, name: "ddd" },
        { id: 5, name: "eee" }
      ]
    };
  }
};
</script>

当然ドラッグできません。
f:id:yyama1556:20190203111503p:plain

ここに Vue.Draggable を適用してドラッグ＆ドロップできるようにしていきたいと思います。

Vue.Draggable インストール

npm を使用してインストールする場合の例です。

npm install --save vuedraggable

Vue.Draggable を適用する

App.vue を次のように変えます。

<template>
  <div id="app">
    <draggable v-model="list" element="ul" :options="{animation:300}">
      <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "aaa" },
        { id: 2, name: "bbb" },
        { id: 3, name: "ccc" },
        { id: 4, name: "ddd" },
        { id: 5, name: "eee" }
      ]
    };
  }
};
</script>

js 部分で vuedraggable をインポートして components に登録しています。

テンプレート部分では ul タグに変えて draggable タグを使用しています。

これでドラッグ＆ドロップできるようになりました。
f:id:yyama1556:20190203113800g:plain