Vue拖拽hooks简单实现

import { type Ref, onMounted, onUnmounted } from 'vue'
export default function useDrag(containerRef: Ref<HTMLElement>, contentRef?: Ref<HTMLElement | null>) {
    let move = false
    let x, y, containerHeight, containerWidth
    function mouseDownHandle(e) {
        [x, y, containerHeight, containerWidth] = [e.offsetX, e.offsetY, containerRef.value?.offsetHeight, containerRef.value?.offsetWidth]
        move = true
        document.addEventListener('mousemove', mouseMoveHandle)
        document.addEventListener('mouseup', mouseUpHandle)
    }
    function mouseMoveHandle(e) {
        // 剩余留白空间
        const restHeight = window.innerHeight - containerHeight
        const restWidth = window.innerWidth - containerWidth
        // 鼠标位置和盒子边界之间的距离
        let div_top = e.clientY - y
        let div_left = e.clientX - x
        // Math.max(0, div_top)取盒子在视口内的值，如果div_top为负数就取值0 Math.min(Math.max(0, div_top), restHeight)//最大边界不超过restHeight
        let containerTop = Math.min(Math.max(0, div_top), restHeight), containerLeft = Math.min(Math.max(0, div_left), restWidth)
        if (move) {
            containerRef.value!.style.left = containerLeft + 'px'
            containerRef.value!.style.top = containerTop + 'px'
        }
    }
    function mouseUpHandle(e) {
        move = false
    }
    onMounted(() => {
        containerRef.value?.addEventListener('mousedown', mouseDownHandle)
    })
    onUnmounted(() => {
        containerRef.value?.removeEventListener('mousedown', mouseDownHandle)
        document.removeEventListener('mousemove', mouseMoveHandle)
        document.removeEventListener('mouseup', mouseUpHandle)
    })
}