H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】react实现div拖拽功能无效果

代码如下,拖拽总共分为onMouseDown、onMouseMove、onMouseUp三个事件,运行后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

回答:

最主要的问题就是useState的滥用,除了pageY和pageX,其他的都没必要使用useState,特别是moving,因为useState是异步的,所以当你用setMoving设置moving,其实他的值并没有立刻改变,所以在onMouseMove中,他走不到下面的代码。还有一些小问题,比如onMouseMove和onMouseUp覆盖了document原本的事件,这个可以在onMouseDown中保存一份,在onMouseUp中再给他还原,其他的类似元素本身有动画怎么处理,元素拖拽越界怎么处理,浏览器兼容性等就不说了。

回答:

楼上说的是React的基本功,这个得多练多写才能提高。
先说拖动的问题吧。
在你要拖拽的元素上添加一个属性: draggable

<div draggable="true"></div>

或者你可以了解一下 react-dnd

本文地址:H5W3 » 【前端问题精选】react实现div拖拽功能无效果

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址