移动端实现div拖拽

import { useEffect } from 'react';
import { useDebounceFn } from 'ahooks';

const useDrag = () => {
    // 当前拖拽元素
    let draggingObj: any = null;
    let diffX = 0;
    let diffY = 0;
    // 拖拽时距离边界的最小值
    const minLeftTop = 10;
    const documentClientWidth = document.documentElement.clientWidth;
    const documentClientHeight = document.documentElement.clientHeight;

    const mouseHandler = (e) => {
        // console.log('mouseHandler--event', e);
        draggingObj = e.target;
        if (!draggingObj) return;
        switch (e.type) {
            case 'touchstart':
                diffX = e.targetTouches?.[0].clientX - draggingObj.offsetLeft;
                diffY = e.targetTouches?.[0].clientY - draggingObj.offsetTop;
                break;
            case 'touchmove':
                let left = e.targetTouches?.[0].clientX - diffX;
                let top = e.targetTouches?.[0].clientY - diffY;
                let maxLeft = documentClientWidth - minLeftTop - draggingObj.clientWidth;
                let maxTop = documentClientHeight - minLeftTop - draggingObj.clientHeight;
                if (left < minLeftTop) {
                    left = minLeftTop;
                }
                if (left > maxLeft) {
                    left = maxLeft;
                }
                if (top < minLeftTop) {
                    top = minLeftTop;
                }
                if (top > maxTop) {
                    top = maxTop;
                }
                draggingObj.style.left = left + 'px';
                draggingObj.style.top = top + 'px';
                break;
            case 'touchend':
                diffX = 0;
                diffY = 0;
                break;
        }
    };

    const { run } = useDebounceFn(
        () => {
            mouseHandler;
        },
        {
            wait: 500,
        },
    );

    const Dragging = () => {
        return {
            enable: function () {
                document.addEventListener('mousedown', run);
                document.addEventListener('mousemove', run);
                document.addEventListener('mouseup', run);
            },
            disable: function () {
                document.removeEventListener('mousedown', run);
                document.removeEventListener('mousemove', run);
                document.removeEventListener('mouseup', run);
            }
        }
    }

    useEffect(() => {
        Dragging().enable();
        return () => {
            Dragging().disable();
        };
    }, []);

    return {
        mouseHandler,
    }
}

export default useDrag;