clientManageSystem/src/baseComponents/TableRowDragUpDown.vue

<template>
    <img
        :draggable="true"
        @dragstart="(e)=>HandleDragStart(e)"
        @dragend="(e)=>HandleDragEnd(e,tableRow,currentIndex - 1)"
        :src="moveIcon" alt="">
</template>   


<script setup lang="ts">
import { ref,watch } from 'vue';
import moveIcon from '@/assets/icon/move_up_down.png'
import { number } from 'echarts';

const props = defineProps({
    defaultTableData:{
        type:Array,
        default:()=>[]
    },
    tableRow:{
        type:Object,
        required:true
    },
    currentIndex:{
        type:Number,
        required:true
    },
    rowHeight:{
        type:number,
        default:52
    },
    startIndex:{
        type:Number,
        required:true,
    },
    endIndex:{
        type:number,
        required:true
    }
})

const emit = defineEmits(['moveChange'])

const tableData = ref([])

const startYPointer = ref(0)
const HandleDragStart = (e)=>{
    console.log('开始拖动了',e)
    startYPointer.value = e.clientY
}

const HandleDragEnd = (e,row,currentIndex)=>{
    console.log('结束拖动了',e)
    let endYPointer = e.clientY
    let moveNum = 0
    if(endYPointer > startYPointer.value){
        // 下移
        moveNum =   Math.ceil((endYPointer - startYPointer.value) / props.rowHeight)
        // 替换当前表格的内容
        let maxLength = tableData.value.length
        if(moveNum > 0){
            tableData.value.splice(currentIndex,1)
            tableData.value.splice(Math.min(currentIndex + moveNum - 1,props.endIndex),0,row)
            emit('moveChange',tableData.value)
        }
    }else{
        // 上移
        moveNum = Math.ceil(( startYPointer.value - endYPointer) / props.rowHeight)
        // 替换当前表格的内容
        if(moveNum > 0){
            tableData.value.splice(currentIndex,1)
            tableData.value.splice(Math.max(currentIndex - moveNum,props.startIndex),0,row)
            emit('moveChange',tableData.value)
        }
    }
}

watch(()=>props.defaultTableData,(newVal)=>{
    tableData.value = [...(newVal || [])]
},{immediate:true,deep:true})
</script>


<style lang="scss" scoped>

</style>