pc鼠标左右移动

 const movable =useRef<any>(null)
  const handle =()=>{
    let isDragging = false;
    let startX:any;

    movable.current.addEventListener('mousedown', (e:any) => {
        isDragging = true;
        startX = e.clientX - movable.current.getBoundingClientRect().left;
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            const newLeft = e.clientX - startX;
            movable.current.style.left = `${newLeft}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
}

  -webkit-user-drag: none;
  -moz-user-select: none;
  -khtml-user-drag: none;
  user-select: none;
<div style={{border:"1px solid rgb(234, 234, 237)",height: '1.37rem',position:"relative",overflow:"hidden"}}>
    <div ref={movable} onClick={()=>{
        handle()
    }}  style={{ position: 'absolute',
        cursor: 'move', marginTop: '0.05rem', display: 'flex', flexWrap: 'nowrap' }}>
        {listimg?.map((i, v) => {
          return (
            <div
              onClick={() => {
                setValue(v);
              }}
              style={{
                marginTop: value == v ? '-0.03rem' : '0',
                border: value == v ? '0.04rem solid #0D7DFC' : '0.01rem solid #979797',
                marginBottom: '0.19rem',
                marginRight: '0.19rem',
                width: '1.26rem',
                height: '1.26rem',
              }}
              key={v}
            >
              <img className={styles["user-none"]}  style={{width: '1.26rem', height: '1.26rem' }} src={i} alt="" />
            </div>
          );
        })}
      </div>
    </div>