react+TypeScript 拖拽（pc端和移动端）_react.mouseevent<htmldivelement>-优快云博客

本文详细介绍了如何在React项目中结合TypeScript实现PC端和移动端的拖拽功能，包括HTML结构和CSS样式方面的设置，适用于不同平台的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.pc端

HTML：

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

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={}
    }
   FnDown(ev:React.MouseEvent<HTMLDivElement>):void{
       if(this.dragElement.current){

         this.disX=ev.clientX-this.dragElement.current.offsetLeft
         this.disY=ev.clientY-this.dragElement.current.offsetTop

       }
       document.onmousemove=this.FnMove.bind(this)
       document.onmouseup=this.FnUp.bind(this)
    }
    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
    }



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

              </div>)
    }
}


export default Drag

css：

.pull{
    height: 300px;
    width: 300px;
    background-color: burlywood;
    position: absolute;
    left: 0;
    top: 0;
}

2.移动端：

HTML:

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='pull' ref={this.dragElement} onTouchStart={this.Onstart.bind(this)}></div>
        )
    }
}
export default Drag

css:

.pull{
    height: 300px;
    width: 300px;
    background-color: burlywood;
    position: absolute;
    left: 0;
    top: 0;
}