typescript+reac实现简单的拖拽（移动端+PC端）

一、移动端
1.tsx代码

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

}
interface State {

}

class Drag extends Component<Props, State>{
    startX: number = 0
    startY: number = 0
    X: number = 0
    Y: number = 0
    dragElement = createRef<HTMLDivElement>()
    constructor(props: Props) {
        super(props)
        this.state = {

        }
    }
    Onstart(ev: React.TouchEvent<HTMLDivElement>): void {
        if (this.dragElement.current) {
            this.startX = ev.changedTouches[0].pageX - this.dragElement.current?.offsetLeft
            this.startY = ev.changedTouches[0].pageY - this.dragElement.current?.offsetTop
            document.ontouchmove = this.Amove.bind(this)
            document.ontouchend = this.Onend.bind(this)
        }
    }
    Amove(ev: TouchEvent): void {
        this.X = ev.changedTouches[0].pageX - this.startX
        this.Y = ev.changedTouches[0].pageY - this.startY
        if (this.dragElement.current) {
            this.dragElement.current.style.left = this.X + 'px'
            this.dragElement.current.style.top = this.Y + 'px'
        }
    }
    Onend() {
        document.ontouchmove = null
        document.ontouchend = null
    }



    render() {
        return (
            <div className='drag' ref={this.dragElement} onTouchStart={this.Onstart.bind(this)}></div>
        )
    }
}
export default Drag

2.css代码

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

二、PC端
1.tsx代码

、import { Component, createRef } from 'react'
import './index.less'
interface Props {


}
interface State {


}
class TextDrag extends Component {
  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) {
    if (this.dragElement.current) {
      this.disX = ev.clientX - this.dragElement.current?.getBoundingClientRect().left
      this.disX = ev.clientY - this.dragElement.current?.getBoundingClientRect().top
    }
    document.onmousemove = this.FnMove.bind(this)
    document.onmouseup = this.FnUp
  }
  FnMove(ev: MouseEvent) {
    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
  }
  render() {
    return (
      <div className="TextDrag" ref={this.dragElement} onMouseDown={this.FnDown.bind(this)}>  </div>


    )
  }
}


export default TextDrag

2.css代码

.TextDrag{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}