dnd kit
@dnd-kit
useDraggable e useDroppable . e não forçará você a reestruturar seu aplicativo ou a criar nós DOM de wrapper adicionais.@dnd-kit/sortable , que é uma camada fina construída sobre @dnd-kit/core . Mais predefinições chegando no futuro. Para saber como começar a usar o dnd kit , visite o site oficial da documentação. Você encontrará documentação detalhada da API, dicas e guias para ajudá-lo a criar interfaces de arrastar e soltar.
A biblioteca principal do dnd kit expõe dois conceitos principais:
Aumente seus componentes existentes usando os ganchos useDraggable e useDroppable ou combine ambos para criar componentes que podem ser arrastados e soltos.
Lide com eventos e personalize o comportamento de seus elementos arrastáveis e áreas soltáveis usando o provedor <DndContext> . Configure sensores para lidar com diferentes métodos de entrada.
Use o componente <DragOverlay> para renderizar uma sobreposição arrastável que é removida do fluxo normal do documento e posicionada em relação à janela de visualização.
Confira nosso guia de início rápido para saber como começar.
A extensibilidade está no centro do dnd kit . Ele foi construído para ser enxuto e extensível. Ele vem com os recursos que acreditamos que a maioria das pessoas desejará na maioria das vezes e fornece pontos de extensão para construir o restante em cima de @dnd-kit/core .
Um excelente exemplo do nível de extensibilidade do dnd kit é a predefinição Sortable, que é construída usando os pontos de extensão expostos por @dnd-kit/core .
Os principais pontos de extensão do dnd kit são:
Construir interfaces de arrastar e soltar acessíveis é difícil; O dnd kit tem vários padrões e pontos de partida sensatos para ajudá-lo a tornar sua interface de arrastar e soltar acessível:
aria que devem ser passados para itens arrastáveisConfira nosso guia de acessibilidade para saber mais sobre como você pode ajudar a fornecer uma experiência melhor para leitores de tela.
Ao contrário da maioria das bibliotecas de arrastar e soltar, o dnd kit intencionalmente não é construído sobre a API de arrastar e soltar HTML5. Esta foi uma decisão arquitetônica deliberada, que traz vantagens que você deve conhecer antes de decidir usá-la, mas para a maioria das aplicações, acreditamos que os benefícios superam as vantagens.
A API de arrastar e soltar HTML5 tem algumas limitações severas. Ele não oferece suporte a dispositivos de toque ou ao uso do teclado para arrastar itens, o que significa que as bibliotecas construídas sobre ele precisam expor uma implementação totalmente diferente para suportar esses métodos de entrada. Ele também não oferece suporte a casos de uso comuns, como bloquear o arrasto para um eixo específico ou para os limites de um contêiner, estratégias personalizadas de detecção de colisão ou até mesmo personalizar a visualização do item arrastado.
Embora existam soluções alternativas para alguns desses problemas, essas soluções normalmente aumentam a complexidade da base de código e o tamanho geral do pacote da biblioteca e levam a inconsistências entre as camadas de mouse, toque e teclado porque são alimentadas por implementações totalmente diferentes.
A principal desvantagem de não usar a API HTML5 Drag and Drop é que você não poderá arrastar da área de trabalho ou entre janelas. Se o caso de uso de arrastar e soltar que você tem em mente envolve esse tipo de funcionalidade, você definitivamente desejará usar uma biblioteca construída sobre a API HTML 5 Drag and drop. É altamente recomendável que você verifique react-dnd para uma biblioteca React que possui um back-end nativo de arrastar e soltar HTML 5.
O dnd kit permite criar interfaces de arrastar e soltar sem precisar alterar o DOM toda vez que um item precisar mudar de posição.
Isso é possível porque o dnd kit calcula e armazena preguiçosamente as posições iniciais e o layout de seus contêineres que podem ser soltos quando uma operação de arrastar é iniciada. Essas posições são passadas para seus componentes que usam useDraggable e useDroppable para que você possa calcular as novas posições de seus itens enquanto uma operação de arrastar está em andamento e movê-los para suas novas posições usando propriedades CSS de alto desempenho que não acionam uma repintura, como translate3d e scale . Para obter um exemplo de como isso pode ser alcançado, verifique a implementação das estratégias de classificação expostas pela biblioteca @dnd-kit/sortable .
Isso não quer dizer que você não possa mudar a posição dos itens no DOM enquanto arrasta, isso é algo suportado e às vezes inevitável. Em alguns casos, não será possível saber antecipadamente qual a nova posição e layout do item até movê-lo no DOM. Saiba apenas que esse tipo de mutação no DOM durante o arrastamento é muito mais cara e causará uma repintura, portanto, se possível, prefira calcular as novas posições usando translate3d e scale .
O dnd kit também usa ouvintes SyntheticEvent para os eventos ativadores de todos os sensores, o que leva a um melhor desempenho em relação à adição manual de ouvintes de eventos a cada nó arrastável individual.
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities Você precisará instalar todas as dependências no diretório raiz. Como o @dnd-kit é um monorepo que usa espaços de trabalho Lerna e Yarn, npm CLI não é compatível (apenas yarn).
yarn installIsto irá instalar todas as dependências em cada projeto, construí-las e vinculá-las simbolicamente via Lerna
Em um terminal, execute yarn start em paralelo:
yarn start Isso cria cada pacote em <packages>/<package>/dist e executa o projeto no modo de observação para que qualquer edição salva dentro de <packages>/<package>/src cause uma reconstrução em <packages>/<package>/dist . Os resultados serão transmitidos para o terminal.
yarn start:storybookExecuta o livro de histórias Open http://localhost:6006 para visualizá-lo no navegador.
Você pode brincar com pacotes locais no playground do Parcel.
yarn start:playground Isso iniciará o playground em localhost:1234 . Se você tiver lerna executando watch em modo paralelo em um terminal e, em seguida, executar package, seu playground será recarregado quando você fizer alterações em qualquer módulo importado cuja fonte esteja dentro de packages/*/src/* . Observe que para fazer isso, o comando start de cada pacote passa ao TDSX o sinalizador --noClean . Isso evita que o Parcel exploda entre as reconstruções devido a erros de Arquivo não encontrado.
Dica de segurança importante: Ao adicionar/alterar pacotes no playground, use o objeto alias em package.json. Isso dirá ao Parcel para resolvê-los no sistema de arquivos em vez de tentar instalar o pacote do NPM. Ele também corrige erros duplicados do React que você pode encontrar.
(Em um terceiro terminal) você pode executar o Cypress e ele executará os testes de integração no livro de histórias.
