Typescript拖拽

html代码

写在Tsx中render部分

  render() {

        return (<div ref={this.dragElement} className="drag" onMouseDown={this.FnDown.bind(this)}>

        </div>)

    }

js部分 

interface Props {

}
interface State {

}
class Drag 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 = {
            // x: this.X,
            // y: this.Y
        }

    }
    FnDown(ev: React.MouseEvent<HTMLDivElement>):void {
       
        
        if (this.dragElement.current) {
            this.disX = ev.clientX - this.dragElement.current.getBoundingClientRect().left
            this.disY = ev.clientY - this.dragElement.current.getBoundingClientRect().top
        }
        document.onmousemove = this.FnMove.bind(this)
        document.onmouseup = this.FnUp

        ev.preventDefault && ev.preventDefault()
    }
    FnMove(ev: MouseEvent): void {
        
        this.x = ev.clientX - this.disX
        this.y = ev.clientY - this.disY
        if (this.dragElement.current) {
            this.dragElement.current.style.left = this.x + 'px'
            this.dragElement.current.style.top = this.y + 'px'
        }
       
    }
    FnUp() {
        document.onmousemove = null
        document.onmouseup = null
    }

css文件

记得引入哦！！！

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