react hook中PC端拖拽怎么写

tsx中的代码

import React, { useState,useRef, useEffect } from "react";
import "./new.less"
interface collag{

}
export default function Drag() {
  let x:number=0
  let y:number=0
  let pagex:number=0
  let pagey:number=0
  const Box=():HTMLDivElement=>{
    return dragbox.current as HTMLDivElement 
  }
  const  FnMove=(ev:MouseEvent)=>{
     x=ev.clientX-pagex
    y=ev.clientY-pagey

    Box().style.left=x+'px'
    Box().style.top=y+'px'
  }
  const  FnEnd=()=>{
    document.onmousemove=null
    document.onmouseup=null
  }
const  FnDown=(ev:MouseEvent)=>{
   pagex=ev.clientX-x
   pagey=ev.clientY-y
   document.onmousemove=FnMove
   document.onmouseup=FnEnd

   return false
  }
useEffect(()=>{
  Box().onmousedown=FnDown
})
   const dragbox=useRef<HTMLDivElement | null>(null)

less中的代码

.drag{
    .gracbox{
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        top: 0;
        left: 0;
    }
}

直接使用，问题不大