vue2 + vuedraggable实现卡片拖拽排序效果

记录一下拖拽排序的方法，以后可能会用到，找了好多方法，最后用了 vuedraggable，看资料，vue也有原生的拖拽，这个没有看过，有时间会研究一下，原生的可能更简单（只是我想的）。但是vuedraggable也不难。网上也有很多资料。
直接上代码，全部的代码都在这了。
第一步，肯定是 npm i -S vuedraggable 啦
第二步 直接在页面引入。见下方代码

<template>
    <div class="draggable">
        <Draggable v-model="tableData" animation="500" @start="onStart" @end="onEnd">
            <a-card v-for="(item, index) in tableData" :key="index" class="ck-content-common">
                <p>{{item.name}}</p>
                <p>Card content</p>
                <p>Card content</p>
            </a-card>
        </Draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
    components: { Draggable },
    data() {
        return {
            tableData: [
                {
                    name: '0',
                    test: '0'
                },
                {
                    name: '1',
                    test: '1'
                },
                {
                    name: '2',
                    test: '2'
                },
                {
                    name: '3',
                    test: '3'
                },
                {
                    name: '4',
                    test: '4'
                },
                {
                    name: '5',
                    test: '5'
                },
                {
                    name: '6',
                    test: '6'
                },
                {
                    name: '7',
                    test: '7'
                },
                {
                    name: '8',
                    test: '8'
                },
                {
                    name: '9',
                    test: '9'
                }
            ]
        };
    },
    methods: {
        onStart({item,oldIndex}) {
            console.log('开始拖拽',item,oldIndex);
            console.log('原来的数据',this.tableData)
        },
        onEnd({item,newIndex}) {
            console.log('结束拖拽',item,newIndex);
            console.log('之后的数据',this.tableData)
        }
    }
};
</script>
<style scoped>
.draggable {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
}
.ck-content-common {
    border: 1px solid #e8e8e8;
    display: inline-block;
    margin: 10px;
}
</style>

vuedraggable 的属性，可以自己研究一下，中文文档：https://www.itxst.com/vue-draggable/tutorial.html
这个主要还是想和 a-card 卡片结合起来用