Por Baixo do Capô: Arrastar, Toque e Cascata de CSS

Construir um painel de UI redimensionável é mais difícil do que parece. Você precisa gerenciar layouts, eventos de toque e regras de CSS tudo ao mesmo tempo.

Aqui estão três lições técnicas do meu recente redesign de uma UI de visual-diff.

  1. Pare de usar a largura da janela para layouts

Não use window.innerWidth para decidir se o seu layout é vertical ou horizontal. Se um usuário redimensionar a janela, sua lógica quebrará.

Em vez disso, use o estado real do CSS. Use getComputedStyle para verificar o flex-direction. Isso lê o valor real após a aplicação de todas as media queries. Isso garante que sua lógica de arrastar corresponda ao que o usuário realmente vê.

  1. Lide com eventos de toque e mouse juntos

Para fazer o arrastar funcionar tanto no desktop quanto no mobile, você precisa de uma abordagem unificada.

  • Use optional chaining para extrair coordenadas. Isso permite que uma única função lide com eventos de mouse e toque.
  • Use { passive: false } para touchmove. Os navegadores definem eventos de toque como passivos por padrão para auxiliar a rolagem. Se você não definir isso como false, não poderá chamar e.preventDefault(). Sem essa chamada, a página rola enquanto você tenta arrastar.
  • Anexe os listeners de move e end ao document. Se um usuário mover o dedo rápido demais, ele pode sair do divisor. Anexar ao document garante que o arrasto continue mesmo que o ponteiro se desloque.
  1. Evite lutar contra seu sistema de visibilidade

Eu me deparei com um bug de especificidade de CSS. Eu tinha uma classe para esconder painéis e outra para definir a direção do layout.

O problema:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

Como ambos tinham a mesma especificidade, a última no arquivo venceu. Isso significava que meus painéis permaneciam visíveis mesmo quando deveriam estar ocultos.

A solução: Nunca deixe uma classe auxiliar de layout definir a propriedade display. Deixe que a classe de visibilidade seja a responsável por isso.

Em vez de: .diff-layout { display: flex; flex-direction: column; }

Use: .view-panel.diff-layout { flex-direction: column; }

Isso aumenta a especificidade e garante que a classe de layout altere apenas a direção, não a visibilidade.

Fonte: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66