Drag and drop com Framer Motion
Assistir agora
1. Apresentação do Projeto
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Drag and Drop com React e Framer Motion.
Descrição do projeto
Utilize o React e o Framer Motion e construa uma playlist em que você poderá mudar a ordem das músicas utilizando drag and drop! O objetivo desse mini projeto é tanto descobrir como o Framer Motion facilita o uso de drag and drop bem como entender como funciona, por trás dos panos, a lógica de reordenação de uma lista drag and drop.
🤓 Antes de começar
Esse Mini Projeto já possui um template/boilerplate na raiz do repositório com o layout pronto para você focar apenas nas bibliotecas principais (React e Framer Motion).
Se você quer também treinar outras skills front-end como design e CSS, você poderá fazer o projeto do zero (basta apagar os arquivos e começar a partir daí).
🔨 Requisitos
- A aplicação deverá ser mobile-first. Construa pensando em um celular, e não em um monitor.
- Utilize as bibliotecas React + Framer Motion.
- Crie o comportamento de "drag and drop":
- Quando o usuário realizar um clique longo (sem soltar o mouse), o card de música devera "descolar" da aplicação e ser reordenável.
- Quando o usuário "soltar" o clique, a música deverá permanecer em sua nova posição.
- Utilize o componente
Reorder
do Framer Motion.
🔍 Dicas
- Estude a biblioteca
framer/motion
, pois ela possui ferramentas poderosas de animação. - Estude particularmente o componente
Reorder
da bibliotecaframer/motion
- Estude a propriedade pointer-events do CSS.
- Utilize o Devtools do seu navegador com alguma pré-definição de tela mobile. O Chrome, por exemplo, possui essa funcionalidade.
🎨 Design Sugerido
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.
Screenshot
Figma
👉🏽 O que você irá praticar
Framer Motion
- Listas reordenáveis com Drag and Drop
- Componente
Reorder
React
- Manipulação de Estado
- Renderização de Listas
CSS
- Propriedade
pointer-events
Pré-requisitos
HTML, CSS
JavaScript, React
TailwindCSS
é recomendável, já que o template está estilizado com ele.
Seu Instrutor
Aulas
- 1.
Apresentação do Projeto
00:52 - 2.
Instalando o template inicial
01:21 A estrutura do projeto
02:16Os componentes Reorder do Framer Motion
02:32Adicionando o Framer Motion ao Projeto
07:10Adicionando Estado para tornar a lista reativa
02:41A propriedade pointer-events do CSS
03:32Finalização e próximos passos
00:58