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

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
        //判断是