vue3.0项目实现表单拖拽

项目采用vue3.0+ts+elementPlus去开发管理后台，但element没有提供表单拖拽的功能，这里可以借用第三方库（SortableJS）来实现次需求。

github地址：https://github.com/SortableJS/Sortable

中文文档：http://www.sortablejs.com/index.html#

使用方式：

1. npm install sortablejs --save

2.在单页面使用 import Sortable from 'sortablejs';

3.核心代码是rowDrop

import {
    defineComponent,
    reactive,
    toRefs,
    onMounted,
    nextTick
} from 'vue';
export default defineComponent({

    setUp(){
        const state = reatcive({
            data:[{ sort:1,id: 1 },{ sort:2,id: 2 },{ sort:3,id: 3 }]
        })
        const rowDrop = () => {
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            Sortable.create(tbody, {
                onEnd({ newIndex, oldIndex }) {
                    console.log(newIndex,oldIndex);
                    state.data.splice(newIndex,0,state.data.splice(oldIndex,1)[0]);
                    const newArray=state.data.slice(0);
                    state.data= [];
                    nextTick(()=>{
                        state.data = newArray;
                    });
                }
            });
        };        
        onMounted(()=>{
            rowDrop()
        })
        return {
            ...toRefs(state)
        }
    }
})