极简风,双球拖拽 (交叉版)

tsx代码

import React, { Component } from 'react'
import './index.css'
interface Iprop { }
interface Istate { }
export default class index extends Component<Iprop, Istate> {
    constructor(props: Iprop) {
        super(props)
        this.state = {}
    }
    x: number = 0;
    disx: number = 0;
    px: number = 0
    line = React.createRef<HTMLDivElement>()
    Lboll?: HTMLDivElement
    Rboll?: HTMLDivElement
    parentElement = React.createRef<HTMLDivElement>()
    target?: HTMLDivElement
    FnStart(e: React.TouchEvent) {
        this.disx = e.changedTouches[0].pageX - (e.target as HTMLDivElement).offsetLeft
        document.ontouchmove = this.FnMove.bind(this)
    }
    FnMove(e: TouchEvent) {
        this.x = e.changedTouches[0].pageX - this.disx
        this.target = e.target as HTMLDivElement
        this.px = (this.parentElement.current as HTMLDivElement).offsetWidth
        this.Lboll = (this.parentElement.current as HTMLDivElement).children[1] as HTMLDivElement
        this.Rboll = (this.parentElement.current as HTMLDivElement).children[2] as HTMLDivElement
        if (this.x < 0) this.x = 0
        if (this.x > this.px - this.target.offsetWidth) this.x = this.px - this.target.offsetWidth
        if (this.Rboll.offsetLeft >= this.Lboll.offsetLeft) {
            (this.line.current as HTMLDivElement).style.left = this.Lboll.offsetLeft + this.target.offsetWidth / 2 + 'px'
        } else {
            (this.line.current as HTMLDivElement).style.left = this.Rboll.offsetLeft + this.target.offsetWidth / 2 + 'px'
        }
        (this.line.current as HTMLDivElement).style.width = Math.abs(this.Rboll.offsetLeft - this.Lboll.offsetLeft) + 'px'
        if (this.target.classList.contains('ball')) this.target.style.left = this.x + 'px'
    }
    render() {
        return (
            <div className='wrap' ref={this.parentElement}>
                <div className="line" ref={this.line}></div>
                <div onTouchStart={this.FnStart.bind(this)} className="ball"></div>
                <div onTouchStart={this.FnStart.bind(this)} className="ball ac"></div>
            </div>
        )
    }
}

css代码:

.App {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.wrap {
    position        : relative;
    width           : 500px;
    height          : 30px;
    background-color: aqua;

    .line {
        position        : absolute;
        width           : 100%;
        height          : 30px;
        background-color: tomato;
    }

    .ball {
        width           : 50px;
        height          : 50px;
        border-radius   : 50%;
        background-color: slateblue;
        position        : absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }

    .ac {
        left: 450px;
    }


}