react+typescript 写拖拽（pc端)

最新推荐文章于 2025-12-02 21:34:44 发布

原创最新推荐文章于 2025-12-02 21:34:44 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #react.js #javascript

react 专栏收录该内容

14 篇文章

订阅专栏

这篇博客展示了如何在React中创建一个简单的拖拽组件。通过监听鼠标事件，实现了元素的拖动功能，允许用户通过鼠标按下、移动和释放来改变元素的位置。主要涉及的技术包括React的事件处理、状态管理和CSS绝对定位。

这是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 Drag

这是less的代码

.drag{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    position: absolute;
}

react+typescript 写拖拽 （pc端)

react+typescript 写拖拽（pc端)