Estaba implementando un carrusel con chakra ui react para un proyecto de código abierto. Todo parece funcionar como se esperaba, pero al probarlo en dispositivos móviles, inmediatamente observé algo extraño:

• ¿El toque mueve la tarjeta a la derecha aunque estemos moviendo el toque hacia arriba o hacia abajo?

Mientras busco un evento táctil de inicio o finalización específicamente para dispositivos móviles, no tengo ni idea de cómo estimar la dirección del movimiento táctil.

Aquí está el código de los detectores de eventos implementados y asignados a flex:

 const handleDragStart = () => setDragStartPosition(positions[activeItem]); const handleDragEnd = (_, info) => { const distance = info.offset.x; const velocity = info.velocity.x * multiplier; const direction = velocity < 0 || distance < 0 ? 1 : -1; const extrapolatedPosition = dragStartPosition + (direction === 1 ? Math.min(velocity, distance) : Math.max(velocity, distance)); const closestPosition = positions.reduce((prev, curr) => { return Math.abs(curr - extrapolatedPosition) < Math.abs(prev - extrapolatedPosition) ? curr : prev; }, 0); if (!(closestPosition < positions[positions.length - constraint])) { setActiveItem(positions.indexOf(closestPosition)); controls.start({ x: closestPosition, transition: { velocity: info.velocity.x, ...transitionProps } }); } else { setActiveItem(positions.length - constraint); controls.start({ x: positions[positions.length - constraint], transition: { velocity: info.velocity.x, ...transitionProps } }); } };

Ejemplo de CodeSandbox: https://codesandbox.io/s/dd8vn