react+typescript 写拖拽 （pc端)[email protected]的博客

这是js和html的代码

import React, { Component,createRef } from "react";

import './index.less'

interface Props{

}
interface State{

}

class Drag extends Component<Props,State>{
  disX:number = 0
  disY:number = 0
  X:number =0
  Y:number =0

    drag=createRef<HTMLDivElement>()
    constructor(props:Props){
        super(props)
        this.state={

        }
    }
    FnDown(ev:React.MouseEvent<HTMLDivElement>):void{
        // console.log(ev)
        if(this.drag.current){
            this.disX=ev.clientX -this.drag.current.offsetLeft
            this.disY=ev.clientY -this.drag.current.offsetTop


        }
        document.onmousemove=this.More.bind(this)
        document.onmouseup=this.Fnup.bind(this)
      console.log(this.drag)
    }
    More(ev:MouseEvent):void{

        this.X=ev.clientX - this.disX
        this.Y=ev.clientY - this.disY
      

        if(this.drag.current){

            this.drag.current.style.left=this.X+"px"
            this.drag.current.style.top=this.Y+"px"
         }
    
        

    }
    Fnup(){
        console.log(2)
        document.onmousemove=null
        document.onmouseup=null
    }
    render(){
        return(<div ref={this.drag} onMouseDown={this.FnDown.bind(this)} className="drag">

        </div>)
    }

}
export default Dragimport React, { Component,create