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>