- Movimento natural e lindo dos itens 💐
- Accessível: suporte poderoso ao teclado e leitores de tela ♿️
- Extremamente performático 🚀
- API limpa e poderosa, fácil de começar a usar
- Brinca muito bem com as interações padrões do browser
- Estilo sem influência
- Sem a criação de Nós DOM adicionais ao redor - amigável para flexbox e gerenciamento de foco!
Nós criamos um curso grátis no egghead.io🥚 para te ajudar a começar a usar o react-beautiful-dnd o mais rápido possível.
- Listas verticais ↕
- Listas horizontais ↔
- Movimento entre listas (▤ ↔ ▤)
- Combinar items
- Suporte a Mouse 🐭, teclado 🎹♿️ e toque 👉📱(celulares, tablets e por aí vai)
- Suporte a arraste múltiplo
- Suporte incrível a leitores de tela ♿️ - Nós fornecemos de fábrica uma experiência incrível para leitores de tela em inglês📦. Nós também fornecemos personalização completa e suporte a internacionalização para aqueles que precisam deles 💖
- Arraste condicional e solte condicional
- Listas múltiplas e independentes em uma mesma página
- Itens de tamanhos flexíveis - os items arrastáveis podem ter alturas diferentes (listas verticais) ou larguras (listas horizontais)
- Adição/Remoção de itens durante o arraste
- Compatível com a reordenação semântica de
<table>- padrão de tabela - Rolagem Automática - automaticamente rola os elementos e a janela de acordo com a necessidade durante o arraste (mesmo com o teclado 🔥)
- Alças de arraste personalizadas - Você pode arrastar pelo item inteiro, ou só por parte dele
- Compatível com
ReactDOM.createPortal- padrão de portais - 🌲 Suporte ao pacote de árvores
@atlaskit/tree - Uma lista
<Droppable />pode ser um container rolável (sem um pai rolável) ou ser filho de um container rolável (que também não tenha um pai rolável) - Listas aninhadas independentes - uma lista pode ser filha de outra lista, mas você não pode arrastar da lista pai pra lista filha
- Compatível com renderização no servidor (SSR) - veja resetServerContext()
- Brinca bem com elementos interativos aninhados by default
O react-beautiful-dnd existe para criar lindas listas de clique e arraste que qualquer um possa usar - até mesmo pessoas que não podem enxergar. Para um bom panorama da história e motivações para o projeto, você pode dar uma olhada nos seguintes recursos externos:
Existem muitas bibliotecas por aí que permitem clique e arraste dentro do React. A mais notável delas é a maravilhosareact-dnd. Ela faz um trabalho incrível em fornecer um conjunto de elementos primitivos de clique e arraste que funcionam especialmente bem com a selvagenmente inconsistente funcionalidade de clique e arraste do html5. react-beautiful-dnd é uma abstração de alto nível construída especificamente para listas(vertical, horizontal, movimento entre listas, listas aninhadas, etc). Dentro desse conjunto de funcionalidades, o react-beautiful-dnd oferece uma poderosa, natural e linda experiência de clique e arraste. No entanto, ele não provê a gama de funcionalidades oferecida pelo react-dnd. Então o react-beautiful-dnd pode não ser para você, dependendo do seu caso.
- Instalação
- Exemplos e amostras
- Comece a usar
- Princípios de design
- Animações
- Accessibilidade
- Suporte de Navegador
Os jeitos que alguém controla um clique e arraste
<DragDropContext />- Encapsula os elementos para os quais você quer ter clique e arraste<Droppable />- Uma área onde elementos podem ser soltos. Contém<Draggable />s<Draggable />- O que pode ser arrastado por aíresetServerContext()- Utilidade para Renderização no Servidor(SSR)
<DragDropContext />respondedores -onDragStart,onDragUpdate,onDragEndandonBeforeDragStart- Combinando
<Draggable />s - Problemas comuns na configuração
- Usando
innerRef - Alertas de desenvolvedor e como desabilitá-los
- Regras para
draggableIdedroppableIds - Customizando e pulando a animação de soltar
- Rolagem automática
- Controlando o leitor de tela
- Usando o
doctypehtml5 TypeScripteflow- Arrastando
<svg>s - Estilos pre-setados invisíveis
- Como detectamos os contâineres roláveis
- Como usamos eventos DOM - Útil se você precisar desenvolver em cima do
react-beautiful-dnd - Adicionando um
<Draggable />s durante o arraste -⚠️ Avançado
- Saúde da engenharia
- Comunidade e adicionais
- Notas de lançamento e mudanças
- Atualizando
- Caminho de desenvolvimento
- Mídia
한글/Korean
中文/Chinese
На русском/Russian**
Português/Portuguese**Alex Reardon @alexandereardon
- Bogdan Chadkin @IAmTrySound
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Many other @Atlassian's!