react实现div拖拽功能无效果

Question

 如下图代码所示，主要实现对一个div进行拖拽的功能，但是运行后无法拖拽，也没有什么报错，请问这个问题究竟出在哪里呢？

import React, {useState} from "react";

const Drag:React.FC=(props)=>{

    const [pageX,setpageX] = useState<any>('1000px')
    const [pageY,setpageY] = useState<any>('500px')
    const [diffX,setdiffX] = useState<any>('')  
    const [diffY,setdiffY] = useState<any>('')
    const [moving,setMoving] = useState<boolean>(false)

    // 获取鼠标点击对象时的坐标、对象的坐标以及两者的位移
    const getPosition =(e:any)=> {
        //需要移动的元素
        let dragdom:any = document.getElementById('drag')

        //由于Y轴出现滚动条，需要与鼠标保持一致，存储页面相对位置
        const X = dragdom.offsetLeft       
        const Y = dragdom.offsetTop

        console.log(X);
        console.log(Y);

        // 获取鼠标在页面中的位置
        let mouseX = e.pageX
        let mouseY = e.pageY
        
        // 鼠标点击位置与对象的位移，也就是鼠标按下时在盒子中的位置
        const diffX = mouseX - X
        const diffY = mouseY - Y
        return {X, Y, mouseX, mouseY, diffX, diffY}
    }

   /**
   * 鼠标按下，设置div状态为可移动，并注册鼠标移动事件
   * 计算鼠标按下时，指针所在位置与div位置以及两者的差值
   **/
  const onMouseDown =(e:any)=> {
    const position = getPosition(e)
    document.onmousemove = onMouseMove
    document.onmouseup = onMouseUp
    setdiffX(position.diffX)
    setdiffY(position.diffY)
    setMoving(true)
  }

  // 松开鼠标，设置div状态为不可移动
  const onMouseUp =(e:any)=> {
    moving && setMoving(false);
  }

    // 鼠标移动重新设置div的位置
    const onMouseMove =(e:any)=> {
        if (moving) {
          // 获取鼠标位置数据
          const position = getPosition(e)
          // 计算div应该随鼠标移动到的坐标
          const x = position.mouseX - diffX
          const y = position.mouseY - diffY
          // 窗口大小，结构限制，需要做调整，减去侧边栏宽度
          const { clientWidth, clientHeight } = document.documentElement
          const modal:any = document.getElementById('drag')
          if (modal) {
            // 计算div坐标的最大值
            const maxHeight = clientHeight - modal.offsetHeight
            const maxWidth = clientWidth - modal.offsetWidth
            // 判断得出div的最终位置，不得超出浏览器可见窗口
            const left = x > 0 ? (x < maxWidth ? x : maxWidth) : 0
            const top = y > 0 ? (y < maxHeight ? y : maxHeight) : 0
            setpageX(left)
            setpageY(top)
          }
        }
      }


    const newStyle:any = {
        width:'70px',
        height:'70px',
        boxSizing: 'border-box',
        position: 'absolute',
        top: pageY,
        left: pageX,
        zIndex: 999,
        backgroundColor: '#7d7979d9',
    
    }

    return (
        <>
        <div id='drag' style={newStyle} onMouseDown={onMouseDown}></div>
        </>
    )
}
export default Drag

Answer 1

参考GPT和自己的思路：

从代码中没有明显的错误或报错信息来看，问题可能出在CSS样式上。可以检查一下拖拽元素的父元素以及拖拽元素本身的定位方式是否设置为relative或absolute。另外还需要确认拖拽元素是否有明确的宽高，否则可能不容易被拖拽。