react+hook实现拖拽

方法一： 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;
}