【无标题】点击更新进度条位置

<div onMouseDown={changePosition} ref={playBackSignRef} className={styles.playBackSign}>
        <span ref={showCurTimeSpanRef} className={styles.showCurTime}>
          {_L.isEmpty(timeFrame) ? '' : formatDate2String(curTimer)}
        span>
      div>
1
2
3
4
5

const changePosition = (event: any) => {
    if (_L.isEmpty(timeFrame)) return;
    const offsetWidth = window.innerWidth;
    const stop = event.currentTarget;
    const { offsetLeft } = stop;
    stop.style.left = offsetLeft + 'px';
    const { pageX: start } = event;
    const move = (e: MouseEvent) => {
      setIsMoveFn(true);
      let val = offsetLeft + e.pageX - start;
      if (val <= 0) val = 0;
      if (val >= offsetWidth) val = offsetWidth;
      stop.style.left = val === 0 ? val + 'px' : val - 8 + 'px';
      setPercentFn((val / offsetWidth) * 100);
      setNewCurTimeFn((val / offsetWidth) * timeDifferenceSecond * baseSecond);
    };
    const clear = () => {
      setIsMoveFn(false);
      document.removeEventListener('mousemove', move);
      document.removeEventListener('mouseup', clear);
      // document.removeEventListener('mouseleave', clear);
    };
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', clear);
    // document.addEventListener('mouseleave', clear);
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27