vue3.0之表格拖拽-最简单的表格(不带层级/树级)

const rowDrop = () => {
    let tbody: any = document.querySelector(".sortableArea .el-table__body-wrapper tbody");
    sortable.value = Sortable.create(tbody, {
        group: {
            name: "table",
            pull: true,
            put: true
        },
        handle: ".drag-icon",
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        filter: ".noDrag", // 过滤.not-sort的元素
        // 拖拽开始关闭同级子节点
        onStart: function () {
            activeRows.value = JSON.parse(JSON.stringify(proTable.value.tableData));
        },
        onEnd(e: any) {
            console.log("onEnd", e);
            let oldRow = activeRows.value[e.oldIndex]; // 移动的那个元素
            if (e.oldIndex === e.newIndex) return;
            const index = activeRows.value.indexOf(oldRow);
            if (index < 0) return;
            //删除拖动元素
            activeRows.value.splice(e.oldIndex, 1);
            //挪到新位置
            activeRows.value.splice(e.newIndex, 0, oldRow);
            //前置id
            let prefixRowId = null;
            if (e.newIndex - 1 < 0) {
                prefixRowId = 0;
            } else {
                prefixRowId = activeRows.value[e.newIndex - 1].id;
            }
            let params = {
                prefixRealmId: prefixRowId,
                id: oldRow.id
            };
            realmSort(params);
        }
    });
};

onMounted(() => {
    rowDrop();
});