js 鼠标拖拽元素的时候鼠标位置发生偏移

Question

如图一所示，页面中有一可拖拽小球，当鼠标按下变为拖拽手势时，鼠标还是在小球中间的，但是一旦开始拖拽了，鼠标瞬间就移到左上角的位置，如图二所示。

鼠标位置的获取就是用下方代码获取的，不知道为什么开始拖拽时就发生了偏移

        const mouseX = event.pageX
        const mouseY = event.pageY

请问这种情况该怎么解决呢？

mouseMove代码

    /*定义两个值用来存放当前元素的left和top值,小球相对于父组件的left和top值,初始值由父组件设定*/
    const [needX, setNeedX] = useState<number>(props.Left)
    const [needY, setNeedY] = useState<number>(props.Right)
    
    const onMouseMove = (e: any) => {
        const event = e || window.event;

        //获取鼠标位置
        const mouseX = event.pageX
        const mouseY = event.pageY

        //计算小球应该随鼠标移动到的位置
        let left = mouseX - disX;
        let top = mouseY - disY;

        //获取被拖拽的元素
        const dragball: any = document.getElementById('drag')

        //计算元素位置坐标的最大值
        const maxHeight = props.fatherHeight - dragball.offsetHeight
        const maxWidth = props.fatherWidth - dragball.offsetWidth

        //不可超出规定拖拽范围
        left = left > 0 ? (left < maxWidth ? left : maxWidth) : 0
        top = top > 0 ? (top < maxHeight ? top : maxHeight) : 0

        //将结果保存为最终元素需要显示的坐标
        setNeedX(left)  
        setNeedY(top)
    }

Answer 1

http://jsrun.net/rRaKp/edit

看上去没有问题。你肯定少写什么了。你照着我的代码改改？

Answer 2

JS没有问题的情况下，你去看看CSS，首先要移动的元素不能设置外边距，其次要移动的元素要使用固定布局fixed（相对于浏览器窗口定位），这样就不会出现鼠标弹开的情况了。