react+ts实现小球交叉，小球互推，并高亮

htm部分

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

interface Props {

}
interface State {
    Num: number,
    MaxNum: number,
    Rightlist: xian[]
    Leftlist: xian[]
}
interface xian {
    id: string,
    text: number
}


class Drag extends Component<Props, State>{
    constructor(props: Props) {
        super(props);
        this.state = {
            Num: 0,
            MaxNum: 100,
            Rightlist: [
                { id: "a1", text: 10 },
                { id: "a2", text: 20 },
                { id: "a3", text: 30 },
                { id: "a4", text: 40 },
                { id: "a5", text: 50 },
                { id: "a6", text: 60 },
                { id: "a7", text: 70 },
                { id: "a8", text: 80 },
                { id: "a9", text: 90 },
                { id: "a10", text: 100 },
            ],
            Leftlist: [
                { id: "a1", text: 0 },
                { id: "a2", text: 10 },
                { id: "a3", text: 20 },
                { id: "a4", text: 30 },
                { id: "a5", text: 40 },
                { id: "a6", text: 50 },
                { id: "a7", text: 60 },
                { id: "a8", text: 70 },
                { id: "a9", text: 80 },
                { id: "a10", text: 90 },
            ],
        }
    }
    Segment = createRef<HTMLDivElement>()
    parent?: HTMLDivElement;
    child!: HTMLCollection;
    startX: number = 0;
    ballW: number = 0;
    oW: number = 0;
    x: number = 0;
    dis: number = 0;
    Num: number = 0;
    MaxNum: number = 0;
    scale: number = 0;
    FnStart(ev: React.TouchEvent) {
        this.startX = ev.changedTouches[0].pageX - (ev.target as HTMLDivElement).offsetLeft;
        this.parent = ((ev.target as HTMLDivElement).parentNode) as HTMLDivElement;
        this.child = this.parent.children;
        this.ballW = (ev.target as HTMLDivElement).offsetWidth;
        this.oW = this.parent.offsetWidth - this.ballW;
        document.ontouchmove = this.FnMove.bind(this);
        document.ontouchend = this.FnEnd.bind(this);
    }
    FnMove(ev: TouchEvent) {
        this.x = ev.changedTouches[0].pageX - this.startX;
        if (this.x < 0) this.x = 0;
        if (this.x > this.oW) this.x = this.oW;
        for (var i = 0; i < this.child.length; i++) {
            if (this.child[i].classList.contains('small-ball')) {
                let Len = this.child.length - 2;
                if (i === Len) {
                    this.dis = Math.abs((this.child[i] as HTMLDivElement).offsetLeft - (this.child[i + 1] as HTMLDivElement).offsetLeft);
                    (this.child[1] as HTMLDivElement).style.width = this.dis + 'px';
                    if ((this.child[i] as HTMLDivElement).offsetLeft - (this.child[i + 1] as HTMLDivElement).offsetLeft < 0) {
                        (this.child[1] as HTMLDivElement).style.left = (this.child[i] as HTMLDivElement).offsetLeft + 'px';
                    } else {
                        (this.child[1] as HTMLDivElement).style.left = (this.child[i + 1] as HTMLDivElement).offsetLeft + 'px';
                    }
                }
            }
        }
        // 两小球互推,注释掉就是交叉
        // if ((ev.target as HTMLDivElement).className.indexOf('ac') === -1) {
        //     if (this.x + this.ballW > (this.child[3] as HTMLDivElement).offsetLeft) {
        //         if (this.x > this.oW - this.ballW) this.x = this.oW - this.ballW;
        //         (this.child[2] as HTMLDivElement).style.left = this.x + 'px';
        //         (this.child[3] as HTMLDivElement).style.left = this.x + this.ballW + 'px';
        //     }
        // }
        // if ((ev.target as HTMLDivElement).className.indexOf('ac') !== -1) {
        //     if (this.x - this.ballW < (this.child[2] as HTMLDivElement).offsetLeft) {
        //         if (this.x < this.ballW) this.x = this.ballW;
        //         (this.child[2] as HTMLDivElement).style.left = this.x - this.ballW + 'px';
        //         (this.child[3] as HTMLDivElement).style.left = this.x + 'px';
        //     }
        // }


        this.scale = (this.oW) / 100; //一份的长度
        let left = (this.child[2] as HTMLDivElement).offsetLeft;
        this.Num = Math.floor((left / this.scale));
        if (this.Num < 0) this.Num = 0;
        if (this.Num > 100) this.Num = 100;
        let right = (this.child[3] as HTMLDivElement).offsetLeft;
        this.MaxNum = Math.floor(right / this.scale);
        if (this.MaxNum < 0) this.MaxNum = 0;
        if (this.MaxNum > 100) this.MaxNum = 100;
        this.setState({
            Num: this.Num,
            MaxNum: this.MaxNum,

        });
        (ev.target as HTMLDivElement).style.left = this.x + 'px';
    }
    FnEnd() {
        document.ontouchmove = null;
        document.ontouchend = null;
    }

    render() {
        return (
            <div>
                <div className="ball-wrap">
                    <div className="line" ></div>
                    <div className="line active"></div>
                    <div className="small-ball" onTouchStart={this.FnStart.bind(this)}><div className="num">{this.state.Num}</div></div>
                    <div className="small-ball ac" onTouchStart={this.FnStart.bind(this)}><div className="num">{this.state.MaxNum}</div></div>
                </div>
                右边
                <div className="segment">
                    {this.state.Rightlist.map((item, index) =>
                        <div className="segment-item" key={index} style={{ backgroundColor: this.MaxNum == item.text ? 'red' : 'yellow' }}>{item.text}</div>
                    )}
                </div>
                左边
                <div className="segment">
                    {this.state.Leftlist.map((item, index) =>
                        <div className="segment-item" key={index} style={{ backgroundColor: this.Num == item.text ? 'red' : 'yellow' }}>{item.text}</div>
                    )}
                </div>
            </div>

        )
    }
}

export default Drag;

css部分

.ball-wrap {
    width: 500px;
    height: 60px;
    margin: 200px auto;
    position: relative;
 
    .line {
        width: 500px;
        height: 3px;
        background: #e3e3e3;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
     
    .line.active {
        width: 500px;
        height: 3px;
        background: skyblue;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
     
    .small-ball {
        width: 50px;
        height: 50px;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        .num{
            position: relative;
            top: 50px;
        }
    }
     
    .small-ball.ac {
        width: 50px;
        height: 50px;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: calc(500px - 50px);
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
 
}
.segment{
    display: flex;
    height: 20px;
    // background-color: aqua;
    .segment-item{
        
        width: 10vw;
        height: 20px;
        background-color: red;
    }
}