1. 安装依赖 vuedraggable

npm i -S vuedraggable

更多配置参考—— vue.draggable中文文档
http://www.itxst.com/vue-draggable/tutorial.html   

2. 表格拖拽 —— 行

要点： draggable 标签上需添加  element="tbody" ， 不然draggable会被解析成div 影响样式

<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>

Element UI表格拖拽（vue中） —— 行拖拽、列拖拽

https://blog.csdn.net/weixin_41192489/article/details/114086578