Drag and drop com Framer Motion

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 biblioteca framer/motion
  • link
• 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

🔗 Link do design

👉🏽 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.