react+ts双球交叉与碰撞

燕京拾亿

已于 2022-04-02 09:48:20 修改

阅读量105

点赞数

文章标签： react.js javascript 前端

于 2021-12-13 08:32:46 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59074147/article/details/121897379

版权

这篇博客展示了如何用React编写一个触摸拖动的滑块组件，该组件包含两个可拖动的小球，用于显示数值范围。通过监听touch事件，计算小球的位置并更新状态，从而实现滑动交互。同时，代码中包含了样式定义，使得组件具有良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.tsx

import { Component } from "react";
import './index.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;

index.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);
    }
}