React中TypeScript中移动端拖拽(附css样式)

import React, { Component,createRef } from "react";
import './Drag.less'

interface Props{

}

interface State{
    
}

class Drag extends Component<Props,State>{
    disY:number=0
    disX:number=0
    y:number=0
    x:number=0
    dragElement = createRef<HTMLDivElement>()
    // eslint-disable-next-line
    constructor(props:Props){
        super(props)
        this.state={
        }
    }
    FnStart(ev:React.TouchEvent<HTMLDivElement>):void{
        if(this.dragElement.current){
            this.disY = ev.changedTouches[0].pageY - this.dragElement.current.offsetTop
            this.disX = ev.changedTouches[0].pageX - this.dragElement.current.offsetLeft
        }
        document.ontouchmove=this.FnMove.bind(this)
        document.ontouchend=this.FnEnd.bind(this)

    }
    FnMove(ev:TouchEvent){
        this.y = ev.changedTouches[0].pageY - this.disY
        this.x = ev.changedTouches[0].pageX - this.disX
        if(this.dragElement.current){
            this.dragElement.current.style.left=this.x + 'px'
            this.dragElement.current.style.top=this.y + 'px'
        }
    }
    FnEnd(){
        document.ontouchmove=null
        document.ontouchend=null
    }
    render(){
        return (<div className="drag" onTouchStart={this.FnStart.bind(this)} ref={this.dragElement}></div>)
    }
}
export default Drag;

.drag{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
}