Reactはダブルスライダークロススライドを実装します

<本文>
    <div id="ルート"></div>
</本文>

<script type="text/babel">
    定数ルート = document.querySelector('#root')
    クラス Comp は React.Component を拡張します {
        コンストラクタ(...引数) {
            super(...引数)
        }
        fn(ev) {
            // マウスクリックの距離を取得します this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft
            // 親を取得します this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            // 親を取得 this.parent = ev.target.parentNode
            // 行を取得します this.line = this.parent.children[2]
 
 
            // 左側のボールを取得します this.oBall = this.parent.children[0]
            // 右側のボール this.oBallTwo = this.parent.children[1]
 
            document.ontouchmove = this.fnMove.bind(これ)
            document.ontouchend = this.fnEnd
        }
        fnMove(ev) {
            // ボックスのオフセット this.X = ev.changedTouches[0].pageX - this.pageX
            // オフセットが親ボックスの幅より大きくならないことを確認する if (this.X >= this.parentWidth) {
                this.X = this.parentWidth
            }
            // 値が 0 未満にならないかどうかをチェックします
            (this.X <= 0) の場合 {
                これ.X = 0
            }
            // 線の幅を計算します。小さなボールのインタラクティブな計算の絶対値が線の幅です。this.lineWidth = Math.abs(this.oBallTwo.offsetLeft - this.oBall.offsetLeft)
            // 線の幅 this.line.style.width = this.lineWidth + 'px'
            // ボールから左までの距離 ev.target.style.left = this.X + 'px'
            // 右ボールの offsetLeft から左ボールの offsetLeft を引いて決定します。0 未満の場合、右ボールが左に最も近いです。左への線の距離である offsetLeft 値を取得します if (this.oBallTwo.offsetLeft-this.oBall.offsetLeft<0) {
                this.line.style.left=this.oBallTwo.offsetLeft+'px'
            }それ以外{
                this.line.style.left=this.oBall.offsetLeft+'px'
            }
        }
        fnEnd() {
            document.ontouchmove = null
            document.ontouchend = null
        }
        与える（） {
            戻り値 (<div className='box'>
                <div className='ball' onTouchStart={this.fn.bind(this)}></div>
                <div className='ボールac' onTouchStart={this.fn.bind(this)}></div>
                <div className='line'></div>
                <div className='lineT'></div>
            </div>)
        }
    }
    ReactDOM.render(<Comp />, ルート)
 
</スクリプト>

<スタイル>
        体 {
            マージン: 0;
            パディング: 0;
        }
 
        。箱 {
            幅: 500ピクセル;
            高さ: 40px;
            背景: #999;
            位置: 相対的;
            マージン: 自動;
            上マージン: 100px;
        }
 
        。ボール {
            幅: 40px;
            高さ: 40px;
            背景: 赤;
            位置: 絶対;
            境界線の半径: 50%;
            zインデックス: 10;
        }
 
        .ball.ac {
            背景: #0f0;
            右: 0;
        }
 
        。ライン {
            高さ: 5px;
            幅: 500ピクセル;
            背景: rgb(200, 110, 7);
            位置: 絶対;
            上位: 50%;
            左: 0;
            変換: translate(0, -50%);
            zインデックス: 5;
        }
 
        .lineT {
            高さ: 5px;
            幅: 500ピクセル;
            背景: #fff;
            位置: 絶対;
            上位: 50%;
            左: 0;
            変換: translate(0, -50%);
        }
</スタイル>