React+ts 实现双小球拖拽、交叉简单小demo

挠了又挠

已于 2022-03-25 19:09:40 修改

阅读量1.1k

点赞数

文章标签：前端 vscode reactjs typescript

于 2022-03-25 10:57:42 首次发布

本文链接：https://blog.csdn.net/bad985664/article/details/123730122

版权

本文通过React结合TypeScript，演示了一个双小球可拖拽的简易示例，涵盖了tsx代码编写及less/css样式的应用。

摘要由CSDN通过智能技术生成

tsx代码：

import './index.less'
interface Props{}
interface State{}

export default class Move extends Component<Props,State> {
    //移动的线
    Line = createRef<HTMLDivElement>()
    //小球距离bady的距离
    DisX:number=0
    //移动的距离
    Distance:number=0
    //大盒子的宽
    BallMove:number=0
    //左右球
    BallZ?:HTMLDivElement
    BallR?:HTMLDivElement
    constructor(props:Props){
        super(props)
        this.state={}
    }
    FnStart(ev:React.TouchEvent){
        this.DisX = ev.changedTouches[0].pageX-(ev.target as HTMLDivElement).offsetLeft
        document.ontouchmove = this.FnMove.bind(this)
    }
    FnMove(ev:TouchEvent){
        this.Distance = ev.changedTouches[0].pageX - this.DisX
        //找到父盒子元素
        const Box = (this.Line.current as HTMLDivElement).parentElement
        //触摸的指定元素
        const EleBox = ev.target as HTMLDivElement
        //判断是