vue使用sortablejs进行表格和div的拖拽

npm install sortablejs --save

<template>
    <div class="draggable">
        <h1>拖动表格</h1>
        <el-table :cell-class-name="tableRowClassName" :data="tableData" style="width: 100%" row-key="date">
            <el-table-column prop="date" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <h1>拖动盒子</h1>
        <div class="draggableDiv">
            <div class='smallBox' v-for="item in boxList" :key="item">{{item}}</div>
        </div>
    </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
    data() {
        return {
            tableData: [{
                date: '1',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '3',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '4',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            boxList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
        };
    },
    created() {

    },
    mounted() {
        this.rowDrop();
        this.boxDrop();
    },
    methods: {
        tableRowClassName({rowIndex}) {
            if (rowIndex == 1) {
                return 'warning-row';
            } else if (rowIndex == 2) {
                return 'error-row';
            }
            return '';
        },
        //行拖拽
        rowDrop() {
            let tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
            let _this = this;
            Sortable.create(tbody, {
                //  指定父元素下可被拖拽的子元素
                draggable: ".draggable .el-table__row",
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.tableData.splice(oldIndex, 1)[0];
                    _this.tableData.splice(newIndex, 0, currRow);
                    console.log('---', _this.tableData);
                }
            });
        },
        //盒子拖拽
        boxDrop() {
            let tbody = document.querySelector('.draggableDiv');
            let _this = this;
            Sortable.create(tbody, {
                //  指定父元素下可被拖拽的子元素
                draggable: ".draggableDiv .smallBox",
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.boxList.splice(oldIndex, 1)[0];
                    _this.boxList.splice(newIndex, 0, currRow);
                    console.log('---', _this.boxList);
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
::v-deep .el-table .warning-row {
    background: #e6a23c !important;
    color: white;
}

::v-deep .el-table .error-row {
    background: #f56c6c !important;
    color: white;
}
.draggableDiv {
    display: flex;
    flex-wrap: wrap;
    .smallBox {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-right: 20px;
        margin-bottom: 20px;
    }
}
</style>