Vueドラッグ・ソート

まず公式サイトdemoを見てみましょうhttps://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif

まずvueプロジェクトでnpmパッケージで

をダウンロードします.npm install vuedraggable -S

ダウンロード後、プラグインを導入し、vueファイルのscriptラベルに

を導入します.import draggable from 'vuedraggable'

コンポーネント

を登録することを忘れないでください.

components: {
    draggable
},

完全コード

    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                myArray : [{
                    id:1,
                    name:"  1 ",
                },{
                    id:2,
                    name:"  2 ",
                },{
                    id:3,
                    name:"  3 ",
                },{
                    id:4,
                    name:"  4 ",
                },{
                    id:5,
                    name:"  5 ",
                }]
            }
        }
    }