clientManageSystem/src/baseComponents/useHandleMoveUpAndDown.ts

/**
 * 处理列表的上下移动
 */
import { Ref, ref } from 'vue'

export function useHandleMoveUpAndDown(moveableList: Ref, rowHeight: number = 42) {
    // 处理试题的上下移动
    const startYPointer = ref(0)  //记录移动开始点

    const HandleDragStart = (e: DragEvent) => {
        console.log('开始拖动了', e)
        startYPointer.value = e.clientY
    }
    const HandleDragEnd = (e: DragEvent, row:any, currentIndex: number) => {
        console.log('结束拖动了', e)
        let endYPointer = e.clientY

        let moveNum = 0
        if(endYPointer > startYPointer.value){
            // 下移层数
            moveNum =   Math.ceil((endYPointer - startYPointer.value) / rowHeight)
            let maxLength = moveableList.value.length
            if(moveNum > 0){
                // 删除当前位置数据
                moveableList.value.splice(currentIndex,1)
                // 在目标位置添加数据
                moveableList.value.splice(Math.min(currentIndex + moveNum - 1,maxLength),0,row)
            }
        }else{
            // 上移层数
            moveNum = Math.ceil(( startYPointer.value - endYPointer) / rowHeight)
            if(moveNum > 0){
                // 删除当前位置数据
                moveableList.value.splice(currentIndex,1)
                // 在目标位置添加数据
                moveableList.value.splice(Math.max(currentIndex - moveNum,0),0,row)
            }
        }
    }

    return {
        HandleDragStart,
        HandleDragEnd
    }
}