vue拖拽 —— vuedraggable 表格拖拽行

npm i -S vuedraggable

<template>
    <div style="padding: 20px">
        <table border="1" cellspacing="0" width="100%">
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <draggable element="tbody" v-model="personList" @end="dragEnd">
                <tr v-for="(item,index) in personList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                </tr>
            </draggable>
        </table>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'
 
    export default {
        components: {draggable},
        mounted() {
            //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
        },
        data() {
            return {
                personList: [
                    {
                        name: '张宁',
                        gender: '女'
                    },
                    {
                        name: '陈浩',
                        gender: '男'
                    },
                    {
                        name: '李三',
                        gender: '男'
                    },
                ]
            }
        },
        methods: {
            dragEnd() {
                console.log("拖拽结束")
            }
        }
    }
</script>
<style scoped>
    td {
        text-align: center;
        padding: 5px
    }
 
    th {
        text-align: center;
        padding: 5px
    }
</style>