Detailed explanation of dragging table columns using Vue Element Sortablejs

@charset "UTF-8";
 
.w-table{
  height: 100%;
  width: 100%;
  float: left;
}
/* Mouse display style during dragging*/
.w-table_moving .el-table th .thead-cell{
  cursor: move !important;
}
.w-table_moving .el-table__fixed{
  cursor: not-allowed;
}
.w-table .thead-cell{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-height: 23px;
  vertical-align: middle;
  overflow: initial;
  position: relative;
}

<template>
    <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
        <el-table :data="data"
                  :ref="option.ref"
                  :class="option.class"
                  :stripe="option.stripe"
                  :border="option.border"
                  :height="option.height"
                  :max-height="option.maxHeight"
                  highlight-current-row
                  :style="{ width: parseInt(option.width)+'px' }" :cell-class-name="cellClassName"
                  :header-cell-class-name="headerCellClassName"
                  @sort-change="option.sortChange"
        >
            <slot name="fixed"></slot>
 
            <template v-for="(col, index) in tableHeader">
                <el-table-column :label="col.label" :key="index" :prop="col.prop" :width="col.width" v-if="col.useTemplate==true">
                    <template slot-scope="scope">
                        <span v-html=col.useTemplateRes(scope.row)></span>
                    </template>
                </el-table-column>
                <el-table-column v-else
                                 :key="index"
                                 :prop="col.prop"
                                 :label="col.label"
                                 :width="col.width"
                                 :min-width="col.minWidth"
                                 :type="col.type"
                                 :sortable="col.sortable"
                                 :header-align="col.headerAlign"
                                 :align="col.align"
                                 :column-key="index.toString()"
                                 :render-header="renderHeader"
                                 show-overflow-tooltip
                                 :formatter="col.formatter"
                >
                </el-table-column>
                <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column>
            </template>
 
 
            <!--<el-table-column v-for="(col, index) in tableHeader" :key="index"
                             :prop="col.prop"
                             :label="col.label"
                             :width="col.width"
                             :min-width="col.minWidth"
                             :type="col.type"
                             :sortable="col.sortable"
                             :header-align="col.headerAlign"
                             :align="col.align"
                             :column-key="index.toString()"
                             :render-header="renderHeader"
                             show-overflow-tooltip
                             :formatter="col.formatter"
            >
            </el-table-column>-->
        </el-table>
    </div>
</template>
 
<script>
    import Sortable from 'sortablejs'
    export default {
        name: "",
        data () {
            return {
                tableHeader: this.header,
                dragState: {
                    start: -9, // index of the starting element
                    end: -9, // Index of the element covered when moving the mouse
                    dragging: false, // Is it dragging direction: undefined // Dragging direction }
            }
        },
        props: {
            data: {
                default: function () {
                    return []
                },
                type: Array
            },
            header: {
                default: function () {
                    return []
                },
                type: Array
            },
            option: {
                default: function () {
                    return {}
                },
                type: Object
            }
        },
        mounted() {
 
        },
        watch:
            header (val, oldVal) {
                this.tableHeader = val
            }
        },
        methods: {
 
            renderHeader (createElement, {column}) {
                return createElement(
                    'div', {
                        'class': ['thead-cell'],
                        on: {
                            mousedown: ($event) => { this.handleMouseDown($event, column) },
                            mousemove: ($event) => { this.handleMouseMove($event, column) }
                        }
                    }, [
                        // Add <a> to display the header label
                        createElement('span', column.label),
                        // Add an empty tag to display the drag animation createElement('span', {
                            'class': ['virtual']
                        })
                    ])
            },
            // Press the mouse to start dragging handleMouseDown (e, column) {
                this.dragState.dragging = true
                this.dragState.start = parseInt(column.columnKey)
                // Add width and height to the virtual container during drag let table = document.getElementsByClassName('w-table')[0]
                let virtual = document.getElementsByClassName('virtual')
                for (let item of virtual) {
                    item.style.height = table.clientHeight - 1 + 'px'
                    // item.style.width = item.parentElement.parentElement.clientWidth + 'px'
                    item.style.width = item.parentElement.clientWidth + 'px'
                }
                document.addEventListener('mouseup', this.handleMouseUp);
            },
 
            // Release the mouse to end drag handleMouseUp () {
                this.dragColumn(this.dragState)
                // Initialize drag state this.dragState = {
                    start: -9,
                    end: -9,
                    dragging: false,
                    direction: undefined
                }
                document.removeEventListener('mouseup', this.handleMouseUp);
            },
 
            //Drag handleMouseMove (e, column) {
                if (this.dragState.dragging) {
                    let index = parseInt(column.columnKey) // Record the starting column if (index - this.dragState.start !== 0) {
                        this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // Determine the drag direction this.dragState.end = parseInt(column.columnKey)
                    } else {
                        this.dragState.direction = undefined
                    }
                } else {
                    return false
                }
            },
 
            // Drag and reposition dragColumn ({start, end, direction}) {
                let tempData = []
                let left = direction === 'left'
                let min = left ? end : start - 1
                let max = left ? start + 1 : end
                for (let i = 0; i < this.tableHeader.length; i++) {
                    if (i === end) {
                        tempData.push(this.tableHeader[start])
                    } else if (i > min && i < max) {
                        tempData.push(this.tableHeader[left?i-1:i+1])
                    } else {
                        tempData.push(this.tableHeader[i])
                    }
                }
                this.tableHeader = tempData
            },
            headerCellClassName ({column, columnIndex}) {
                let active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
                let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
                return `${active} ${start}`
            },
 
            cellClassName ({column, columnIndex}) {
                return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
            },
 
 
 
 
 
 
 
        },
    }
</script>
 
<style>
    @import '~@/assets/css/dragTable.css';
 
 
 
</style>

<template>
    <div>
        <wTable :data="WarnResTable_Data_SS" :header="tableHeaderSS" :option="tableOptionSS">
            <el-table-column
                    type="index"
                    slot="fixed"
                    fixed
                    prop=""
                    label="Serial number"
                    align="center"
                    width="60"
            >
            </el-table-column>
            <el-table-column
                    label="operation"
                    slot="fixed"
                    fixed
                    prop=""
                    width="95"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="lookDetails(scope.$index, scope.row)">View</el-button>
                </template>
            </el-table-column>
        </wTable>
    </div>
</template>
 
<script>
    import wTable from '../../components/dragTable/dragTable'
    export default {
        name: 'Table',
        data () {
            return {
                tableOptionSS: {
                    border: true,
                    stripe: true,
                    ref:'WarnResSSTable',
                    class:'pms-table',
                    maxHeight: "100%",
                    height: "100%",
                    sortChange:this.changeTableSortSS
                },
                tableHeaderSS: [
                    {
                        label: 'city name',
                        prop: 'dsmc',
                        sortable: true,
                        align:'center',
                        width:'200',
                    },
                    {
                        label: 'Operation and maintenance unit',
                        prop: 'ywdw',
                        align:'center',
                        width:'200',
                    },
                    {
                        label: 'Substation',
                        prop: 'bdzmc',
                        align:'center',
                        width:'170',
                    },
                    {
                        label: 'Device name',
                        prop: 'sbmc',
                        sortable: true,
                        align:'center',
                        width:'150',
                    },
                    {
                        label: 'Warning parameters',
                        prop: 'yjcs',
                        align:'center',
                        width:'150',
                    },
                    {
                        label: 'Warning type',
                        prop: 'yjlx',
                        align:'center',
                        width:'140',
                    },
                    {
                        label: 'First warning time',
                        prop: 'scyjsj',
                        sortable:true,
                        align:'center',
                        width:'160',
                        formatter:this.formatTime
                    },
                    {
                        label: 'Update data time',
                        prop: 'dqyjsj',
                        sortable:true,
                        align:'center',
                        width:'160',
                        formatter:this.formatTime
                    },
                    {
                        label: 'Warning description',
                        prop: 'yjgz',
                        align:'center',
                        width:'170',
                    },
                    {
                        label: 'Device type',
                        prop: 'sblx',
                        sortable:true,
                        align:'center',
                        width:'140',
                    },
                    {
                        label: 'voltage level',
                        prop: 'dydjid',
                        sortable:true,
                        align:'center',
                        width:'120',
                        formatter:this.formatVoltageLevel
                    }
                ],
                WarnResTable_Data_SS:[
                    {dsmc:'dsmc1',sbmc:'sbmc1',dydjid:'hhhhh1'},
                    {dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh2'},
                    {dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh3'}
                ],
            }
        },
        methods: {
            handleNameSort() {
                console.log('handleNameSort')
            },
            formatVoltageLevel: function (row, column) {
                let val = row[column.property];
                if (val == undefined) {
                    return "";
                }
                console.log('val ')
                return '5555'
 
            },
            changeTableSortSS(column){
                console.log(' sortHandle column',column)
            },
            formatTime: function (row, column) {
 
                let date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return date?moment(new Date(date)).format('YYYY-MM-DD HH:MM:SS'):'';
            },
            formatVoltageLevel: function (row, column) {
                let val = row[column.property];
                if (val == undefined) {
                    return "";
                }
                return val+'kV'
            },
        },
        components:
            wTable
        }
    }
</script>