Arraste e solte rapidamente para qualquer experiência em qualquer pilha de tecnologia
Documentação | ? Exemplos | ? Como funciona
Arrastar e soltar pragmático é um conjunto de ferramentas de arrastar e soltar de baixo nível que permite o uso seguro e bem-sucedido da funcionalidade de arrastar e soltar integrada aos navegadores. Arrastar e soltar pragmático pode ser usado com qualquer camada de visualização ( react
, svelte
, vue
, angular
e assim por diante). Arrastar e soltar pragmático está alimentando alguns dos maiores produtos da web, incluindo Trello, Jira e Confluence.
Arrastar e soltar pragmático consiste em algumas peças de alto nível:
Arrastar e soltar pragmático contém um pacote principal e vários pacotes opcionais que fornecem as peças para criar qualquer experiência de arrastar e soltar.
Essas peças não têm opinião sobre linguagem visual ou acessibilidade e não dependem do Atlassian Design System.
4.7kB
Criamos saídas visuais opcionais (por exemplo, nosso indicador de queda) para tornar super rápido a construção de experiências de usuário consistentes da Atlassian. Os consumidores que não são da Atlassian podem usar esses resultados, criar os seus próprios resultados que copiem o estilo visual ou seguir uma direção totalmente diferente.
Nem todos os usuários podem obter experiências de arrastar e soltar baseadas em ponteiro. Para alcançar experiências fantásticas para usuários de tecnologia assistiva, fornecemos um conjunto de ferramentas para permitir que você conecte rapidamente fluxos amigáveis de tecnologia assistiva de alto desempenho para qualquer experiência.
Os controles assistivos opcionais que fornecemos são baseados no Atlassian Design System. Se não quiser usar o Atlassian Design System, você pode usar nossas diretrizes e substituir nossos componentes por seus próprios componentes, ou pode abordar a acessibilidade de uma maneira diferente, se desejar.
Este repositório é atualmente um espelho unilateral de nosso monorepo interno que contém todo o código para arrastar e soltar pragmático.
A intenção deste repositório é tornar público o nosso código, mas não aceitar contribuições de código (nesta fase). No futuro, poderíamos explorar a criação de um espelho bidirecional para que as contribuições para este repo também possam retornar ao nosso monorepo. Você ainda pode levantar questões ou sugestões neste repositório!
Toda a documentação e pacotes npm
são públicos e estão disponíveis para uso por todos
Sim! Arrastar e soltar pragmático como um pequeno pacote principal e, em seguida, uma variedade de pacotes opcionais. Alguns dos pacotes opcionais têm dependências de soluções de estilo (por exemplo, emotion
), bibliotecas de visualização (por exemplo, react
) ou de algumas saídas adicionais do Atlassian (por exemplo, @atlaskit/tokens
). Separamos pacotes opcionais que possuem outras dependências para que possam ser facilmente trocados por suas próprias peças que usam sua própria pilha de tecnologia e saídas visuais.
Sim! Criamos algumas diretrizes de design que incorporam como queremos arrastar e soltar em nossos produtos, e algumas dessas decisões estão incorporadas em alguns pacotes opcionais. No entanto, você é livre para usar qualquer linguagem de design que desejar, incluindo a nossa!
@atlaskit
? Os pacotes Pragmatic de arrastar e soltar são publicados sob o namespace @atlaskit
no npm
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter' ;
@atlaskit
é o namespace npm
no qual publicamos todos os nossos pacotes públicos de dentro de nosso monorepo interno. Poderíamos criar um namespace separado no futuro apenas para arrastar e soltar pragmático. Se fizermos isso, lançaremos algumas ferramentas para ajudar as pessoas a fazerem a transição automaticamente.
Feito com amor por:
Arrastar e soltar pragmático está sobre os ombros de gigantes, incluindo as pessoas que criaram as especificações de arrastar e soltar, implementaram o recurso de arrastar e soltar em navegadores e as muitas bibliotecas de arrastar e soltar que vieram antes disso.