Awesome

Clique e arraste Lindo e acessível para listas com React

Brinque com este exemplo se você quiser!

Principais características

• 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!

Comece a usar 👩‍🏫

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.

Pacote atual de funcionalidades suportadas ✅

• 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

Motivação 🤔

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:

• 📖 Repensando o Clique e Arraste
• 🎧 React podcast: Clique e arraste rápido, bonito e accessível

Não é para todos ✌️

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.

Documentação 📖

About 👋

• Instalação
• Exemplos e amostras
• Comece a usar
• Princípios de design
• Animações
• Accessibilidade
• Suporte de Navegador

Sensores 🔉

Os jeitos que alguém controla um clique e arraste

• Arrastando com o mouse 🐭
• Arrastando com o toque 👉📱
• Arrastando com o teclado 🎹♿️

API 🏋️‍

• <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)

Guias 🗺

• <DragDropContext /> respondedores - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart
• Combinando <Draggable />s
• Problemas comuns na configuração
• Usando innerRef
• Alertas de desenvolvedor e como desabilitá-los
• Regras para draggableId e droppableIds
• Customizando e pulando a animação de soltar
• Rolagem automática
• Controlando o leitor de tela
• Usando o doctype html5
• TypeScript e flow
• 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

Padrões 👷‍

• Arraste Múltiplo
• Tabelas
• Usando um portal (ReactDOM.createPortal)

Suporte 👩‍⚕️

• Saúde da engenharia
• Comunidade e adicionais
• Notas de lançamento e mudanças
• Atualizando
• Caminho de desenvolvimento
• Mídia

Leia isso em outros idiomas 🌎

• 한글/Korean
• 中文/Chinese
• На русском/Russian**
• Português/Portuguese**

Autor ✍️

Alex Reardon @alexandereardon

Colaboradores 🤝

• Bogdan Chadkin @IAmTrySound
• Luke Batchelor @alukebatchelor
• Jared Crowe @jaredjcrowe
• Many other @Atlassian's!