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;
}
}