react hook中移动端拖拽怎么写

tsx代码

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

}
export default function Drag() {
  let x: number = 0
  let y: number = 0
  let disX: number = 0
  let disY: number = 0
  const dragbox = useRef<HTMLDivElement | null>(null)
  const Box = (): HTMLDivElement => {
    return dragbox.current as HTMLDivElement

  }
  const FnDown = (ev: TouchEvent) => {
    disX = ev.changedTouches[0].pageX - Box().offsetLeft;
    disY = ev.changedTouches[0].pageY - Box().offsetTop

    document.ontouchmove = FnMove
    document.ontouchend = FnEnd
    return false
  }
  useEffect(() => {
    Box().ontouchstart = FnDown
  })
  const FnMove = (ev:TouchEvent) => {    

    x = ev.changedTouches[0].pageX - disX
    y = ev.changedTouches[0].pageY - disY


    Box().style.left = x + 'px'
    Box().style.top = y + 'px'
  }
  const FnEnd = () => {
    document.ontouchmove = null
    document.ontouchend = null
  }

less中的代码

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