react+hook实现拖拽

浅浅旳笑

已于 2023-05-12 22:14:23 修改

阅读量389

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-05-12 18:46:25 首次发布

本文链接：https://blog.youkuaiyun.com/Sa883349/article/details/130638171

该文章展示了在React中使用`useRef`钩子实现元素拖拽的两种方法。第一种利用`transform`属性进行平移，第二种通过改变`left`和`top`样式属性。在鼠标按下、移动和释放事件中，计算元素的位置变化并更新样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一： transform方法

index.tsx

import { useEffect, useRef } from 'react'
import './index.less'
interface iPositions {
  disX: number
  disY: number
  x: number
  y: number
}
export default function () {
  const drag = useRef<HTMLDivElement | null>(null)
  const FnDrag=()=>{
    return drag.current!
  }
  const positions: iPositions = {
    disX: 0,
    disY: 0,
    x: 0,
    y: 0
  }

  const FnMove=(ev:MouseEvent)=>{
    positions.x=ev.clientX-positions.disX
    positions.y=ev.clientY-positions.disY

    FnDrag().style.transform=`translate(${positions.x}px,${positions.y}px)`
  }
  const fnUp=()=>{
    document.onmousemove=null
    document.onmouseup=null
  }
  const FnDown=(ev:MouseEvent)=>{
    positions.disX=ev.clientX-positions.x
    positions.disY=ev.clientY-positions.y
    document.onmousemove=FnMove
    document.onmouseup=fnUp
  }
  
  useEffect(()=>{
    FnDrag().onmousedown=FnDown
  })
  return <div className="drag" ref={drag}></div>
}

index.less

.drag{
  width: 200px;
  height: 200px;
  position: absolute;
}

方法二：offset方法

index.tsx

import { useEffect, useRef } from 'react'
import './index.less'
interface iPositions {
  disX: number
  disY: number
  x: number
  y: number
}
export default function () {
  const drag = useRef<HTMLDivElement | null>(null)
  const FnDrag=()=>{
    return drag.current!
  }
  const positions: iPositions = {
    disX: 0,
    disY: 0,
    x: 0,
    y: 0
  }

  const FnMove=(ev:MouseEvent)=>{
    positions.x=ev.clientX-positions.disX
    positions.y=ev.clientY-positions.disY
    FnDrag().style.left=positions.x+'px'
    FnDrag().style.top=positions.y+'px'
  }
  const fnUp=()=>{
    document.onmousemove=null
    document.onmouseup=null
  }
  const FnDown=(ev:MouseEvent)=>{
    positions.disX=ev.clientX-FnDrag().offsetLeft
    positions.disY=ev.clientY-FnDrag().offsetTop
    document.onmousemove=FnMove
    document.onmouseup=fnUp
  }
  
  useEffect(()=>{
    FnDrag().onmousedown=FnDown
  })
  return <div className="drag" ref={drag}></div>
}

index.less


.drag{
  width: 200px;
  height: 200px;
  position: absolute;
}