【vue.js】ドラッグで順番を変えられるリストを作った

Vue.Draggableというライブラリを利用して実現しました
https://github.com/SortableJS/Vue.Draggable

▼まずは普通に表示
【js側】
データを用意します
(TestViewという名前のコンポーネントにしました)

<script>
    export default {
        name: "TestView",
        data: function () {
            return {
                list: [
                    { id: 1, name: 'リスト1' },
                    { id: 2, name: 'リスト2' },
                    { id: 3, name: 'リスト3' }
                ],
            }
        }
    }
</script>

【HTML側】
listをv-forを使って表示します
v-forについて: https://jp.vuejs.org/v2/guide/list.html#オブジェクトの-v-for

<template>
    <div v-for="content in list" :key="content.id" style="margin: 10px;">
       <span>
            {{ content.name }}
       </span>
    </div>
</template>

ここまででこんな感じの表示ができます(スタイルは適当に変えています)

▼並び替えできるようにします
Vue.Draggableをインストール
npmでインストールしました

npm install --save vuedraggable

【js側】
Vue.Draggableをインポート

<script>
    //インポート部分追記
    import draggable from 'vuedraggable'

    export default {
        name: "TestView",
        data: function () {
            return {
                list: [
                    { id: 1, name: 'リスト1' },
                    { id: 2, name: 'リスト2' },
                    { id: 3, name: 'リスト3' }
                ],
            }
        }
    }
</script>

【HTML側】
draggableタグでドラッグしたいリストを囲みます

<template>
    <draggable v-model="list">
        <div v-for="content in list" :key="content.id" style="margin: 10px;">
            <span>
                {{ content.name }}
            </span>
        </div>
    </draggable>
</template>

ドラッグ&ドロップで順番を変えられるようになりました(画像だとわかりにくいですが...)