index.tsx
import { Component } from "react";
import './Small-ball.less';
interface Props {
}
interface State {
Num: number,
MaxNum: number,
}
class Drag extends Component<Props, State>{
constructor(props: Props) {
super(props);
this.state = {
Num: 0,
MaxNum: 100
}
}
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 className="ball-wrap">
<div className="line" ref="right"></div>
<div className="line active" ref="line"></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>
)
}
}
export default Drag;
less部分
.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);
}
}