TS代码
import React, { Component, createRef } from 'react';
import './index.less'
interface Props {
}
interface State {
}
class Ball extends Component<Props, State> {
startX: number = 0
parent?: HTMLDivElement
child!: HTMLCollection;
oW: number = 0
Ball: number = 0
x: number = 0
offsetWidth: number = 0
dis: number = 0
PullRight:number=0
PullLeft:number=0
linecolor = createRef<HTMLDivElement>()
TwoChild:number=0
constructor(props: Props) {
super(props)
this.state = {
}
}
FnStart(ev: React.TouchEvent<HTMLDivElement>) {
let target = ev.target as HTMLDivElement
this.startX = ev.changedTouches[0].pageX - target.offsetLeft;
this.parent = target.parentNode as HTMLDivElement;
this.child = this.parent.children;
this.oW = this.parent.offsetWidth - target.offsetWidth;
let childtwo = this.child[2] as HTMLDivElement
this.Ball = childtwo.offsetWidth;
document.ontouchmove = this.FnMove.bind(this);
document.ontouchend = this.FnEnd.bind(this);
}
FnMove(ev: TouchEvent): void {
let target = ev.target as HTMLDivElement
this.x = ev.changedTouches[0].pageX - this.startX
if (this.x < 0) this.x = 0
if (this.x > this.oW) this.x = this.oW
//左边
if (target.className.indexOf("ac") == -1) {
let TwoChild = (this.child[2] as HTMLDivElement).offsetLeft
this.dis = TwoChild - this.x;
if (this.linecolor.current) {
this.linecolor.current.style.left = this.x + "px";
this.linecolor.current.style.width = this.dis + "px";
}
this.PullRight = this.x + this.Ball;
if (this.x > TwoChild - this.Ball) {
if (this.x >= this.oW - this.Ball) {
this.x = this.oW - this.Ball
}
if (this.PullRight >= this.oW) {
this.PullRight = this.oW
}
let childtwo = this.child[2] as HTMLDivElement
childtwo.style.left = this.PullRight + "px";
}
}
//右边
if (target.className.indexOf("ac") != -1) {
let OneChild = (this.child[1] as HTMLDivElement).offsetLeft
if (this.x < OneChild + this.Ball) {
this.PullRight = this.x - this.Ball;
if (this.PullLeft <= 0) this.PullLeft = 0;
if (this.x <= this.Ball) this.x = this.Ball;
(this.child[1] as HTMLDivElement).style.left = this.x - this.Ball + "px";
(this.child[0] as HTMLDivElement).style.left = this.x - this.Ball + "px";
}
if (this.linecolor.current) {
this.linecolor.current.style.width = this.x - (this.child[1] as HTMLDivElement).offsetLeft + "px";
}
}
target.style.left = this.x + "px"
}
FnEnd() {
document.ontouchmove = null;
document.ontouchend = null;
}
render() {
return (
<div className="twopz">
<div className="line">
<div className="line-color" ref={this.linecolor}></div>
<div className="ball" onTouchStart={this.FnStart.bind(this)}></div>
<div className="ball ac" onTouchStart={this.FnStart.bind(this)}></div>
</div>
</div>
);
}
}
export default Ball;
CSS代码
.twopz {
.line {
width: 500px;
height: 1px;
background: rgb(232, 233, 230);
position: relative;
top: 100px;
margin: auto;
.line-color {
width: 500px;
height: 1px;
position: absolute;
top: 0;
bottom: 0;
background: darkorange;
margin: auto;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: cyan;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.ball.ac {
left: calc(500px - 50px);
}
}
}