Bajo el capó: Arrastre, toque y la cascada de CSS
Construir un panel de UI redimensionable es más difícil de lo que parece. Tienes que gestionar diseños, eventos táctiles y reglas de CSS, todo a la vez.
Aquí presento tres lecciones técnicas de mi reciente rediseño de una interfaz de usuario de comparación visual (visual-diff UI).
- Deja de usar el ancho de la ventana para los diseños
No utilices window.innerWidth para decidir si tu diseño es vertical u horizontal. Si un usuario cambia el tamaño de la ventana, tu lógica fallará.
En su lugar, utiliza el estado real de CSS. Usa getComputedStyle para comprobar la flex-direction. Esto lee el valor real después de que se apliquen todas las media queries. Así te aseguras de que tu lógica de arrastre coincida con lo que el usuario ve realmente.
- Gestiona los eventos de toque y ratón de forma conjunta
Para que el arrastre funcione tanto en escritorio como en dispositivos móviles, necesitas un enfoque unificado.
- Usa el encadenamiento opcional (optional chaining) para extraer las coordenadas. Esto permite que una sola función gestione tanto los eventos de ratón como los táctiles.
- Usa { passive: false } para touchmove. Los navegadores configuran los eventos táctiles como pasivos por defecto para facilitar el desplazamiento (scrolling). Si no lo estableces en false, no podrás llamar a e.preventDefault(). Sin esa llamada, la página se desplazará mientras intentas arrastrar.
- Adjunta los escuchadores (listeners) de move y end al document. Si un usuario mueve el dedo demasiado rápido, podría salirse del divisor. Adjuntarlos al document garantiza que el arrastre continúe incluso si el puntero se desvía.
- Evita luchar contra tu sistema de visibilidad
Me encontré con un error de especificidad de CSS. Tenía una clase para ocultar paneles y otra para establecer la dirección del diseño.
El problema:
- .view-panel { display: none; }
- .diff-layout { display: flex; }
Como ambas tenían la misma especificidad, la última en el archivo ganó. Esto significaba que mis paneles permanecían visibles incluso cuando deberían haber estado ocultos.
La solución: Nunca permitas que una clase auxiliar de diseño establezca la propiedad display. Deja que la clase de visibilidad se encargue de eso.
En lugar de: .diff-layout { display: flex; flex-direction: column; }
Usa: .view-panel.diff-layout { flex-direction: column; }
Esto aumenta la especificidad y garantiza que la clase de diseño solo cambie la dirección, no la visibilidad.
Fuente: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66