typescript拖拽

js代码部分

import React, { Component, createRef } from "react";
import "./css/list.less"

interface Props{
    
}
interface State{

}
class List extends Component<Props,State>{
    disX:number=0
    disY:number=0
    x:number=0
    y:number=0
    dragElement=createRef<HTMLDivElement>();
    constructor(props:Props){
        super(props)
        this.state={
             
        }
    }
    FnDown(ev:React.MouseEvent){
        console.log(111)
        if(this.dragElement.current){
            this.disX = ev.clientX - this.dragElement.current.getBoundingClientRect().left;
            this.disY = ev.clientY - this.dragElement.current.getBoundingClientRect().top;
        }
        console.log(this.disY)
        document.onmousemove=this.FnMove.bind(this)
        document.onmouseup=this.FnUp
    }
    FnMove(ev:MouseEvent){
        console.log(888)
        this.x = ev.clientX - this.disX
        this.y = ev.clientY - this.disY
        console.log(this.x,this.y)
        if(this.dragElement.current){
            this.dragElement.current.style.top=this.y+"px"
            this.dragElement.current.style.left=this.x+"px"
        }
    }
    FnUp(){
        document.onmousemove=null
        document.onmouseup=null
    }
    render(){
        return(
            <div>
                <div ref={this.dragElement} className="boxx" onMouseDown={this.FnDown.bind(this)} ></div>
            </div>
        )
    }
}
export default List

css部分

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