Crie componentes arrastáveis ​​com React-Draggable

Simples e fácil de usar, a biblioteca React-Draggable aplica transformações CSS aos componentes React, permitindo que você arrastar componentes em uma IU . Com diferentes adereços que permitem alterar o comportamento dos componentes, React-Draggable é uma ótima escolha para criar intuitivo, interfaces amigáveis.

Neste tutorial, exploraremos o React-Draggable em profundidade criando uma lista de tarefas com componentes arrastáveis. Vamos começar!

Instalando o React-Draggable

Antes de instalar o React-Draggable, certifique-se de ter um projeto React configurado em sua máquina local. Navegue até o projeto e execute o seguinte comando no terminal:

npm install react-draggable

Agora, importaremos o componente da biblioteca. Para adicionar movimento a um elemento ou componente, podemos simplesmente envolver o componente em torno dele.

Adicione o seguinte código ao App.js:

import Draggable from”react-draggable”; function App () {return (

); } exportar aplicativo padrão;

O código acima renderizará a seguinte saída no navegador:

Agora que você sabe como funciona a biblioteca React-Draggable, vamos começar nossa lista de tarefas.

Configurando um aplicativo React

Com a biblioteca React-Draggable instalada, podemos configurar a estrutura de arquivo necessária para nosso projeto e revisar os componentes de que precisaremos. Para atribuir chaves exclusivas aos componentes principais, precisaremos instalar um UUID () da seguinte maneira:

npm i uuid

Nossa estrutura de pastas será semelhante à imagem abaixo:

Criando a lista de tarefas

Dividimos a lógica de nosso projeto em três componentes diferentes. Nossa lista de tarefas usará três colunas para renderizar suas respectivas tarefas.

Vamos adicionar um elemento de formulário para obter a entrada do usuário e adicionar a tarefa no respectivo componente. Nosso arquivo App.js lida com a lista de tarefas principal em seu estado:

import”./App.css”; import {useState} de”react”; função App () {const [tarefas, setTasks]=useState ([]); const [addItem, setAddItem]=useState (false); const handleSubmit=()=> {setAddItem (! addItem); }; const addTask=(tarefa)=> {setTasks (tarefa); }; return (

); } exportar aplicativo padrão;

No código acima, adicionamos as seguintes funções:

tasks: contém a matriz de tarefas que serão renderizadas na tela addItem: o estado para mostrar e ocultar o elemento AddForm, que adiciona uma tarefa

Agora que temos os estados prontos, vamos criar os outros componentes.

Componente do cabeçalho

Adicione o seguinte código ao Header.js:

import React from”reagir”; exportar a função padrão Header ({handleSubmit}) {return (

); }

O obtém a função handleSubmit como um prop, que mostrará o elemento AddForm. Com nosso cabeçalho configurado, vamos criar o elemento AddForm:

Elemento AddForm

Adicione o seguinte código a AddTaskForm.js:

import React, {useState} from”react”; importar {v4 como uuidv4} de”uuid”; função padrão de exportação AddTaskForm ({setAddItem, addItem, tasks, setTasks}) {const [name, setName]=useState (“”); const [descrição, setDescription]=useState (“”); const [opção, setOption]=useState (“”); const handleSubmit=(e)=> {e.preventDefault (); deixe newTask={id: uuidv4 (), nome: nome, descrição: descrição, linha do tempo: opção,}; setTasks ([… tarefas, novaTarefa]); setAddItem (! addItem); }; return (

); }

No bloco de código acima, temos campos de entrada que receberão dados relevantes fornecidos pelos usuários. Cada tarefa tem um id, nome, data e linha do tempo, que são obtidos pelo elemento select.

Quando o formulário é enviado, cada tarefa será adicionada à lista de tarefas que criamos no App.js. Quando o formulário for enviado com sucesso, ele ficará oculto.

Criando as colunas

Em nossa lista de tarefas, teremos três colunas intituladas Planejamento, Em andamento e Concluído. Vamos criar esses componentes e adicionar seus respectivos códigos:

Planning.js

import React de”react”; importar cartão de”./Card”; exportar função padrão Planning ({tasks, addTask}) {return (> {tasks.filter ((item)=> item.timeline===”planning”).map ((e)=> ())} ); }

InProgress.js

importar React de”react”; importar cartão de”./Card”; exportar a função padrão InProgress ({tasks, addTask}) {return (> {tasks.filter ((item)=> item.timeline===”inprogress”).map ((e)=> ())} ); }

Done.js

importar React de”react”; importar cartão de”./Card”; exportar função padrão Concluído ({tarefas, addTask}) {return (> {tarefas.filter ((item)=> item.timeline===”feito”).map ((e)=> ())} ); }

Você deve ter notado que todos esses componentes possuem uma lógica semelhante. Estamos obtendo as tarefas e filtrando-as com base em sua linha do tempo usando tasks.filter (), que remove os objetos de tarefa que não pertencem à coluna.

Por exemplo, no componente de planejamento, filter () irá remover todos os objetos que não possuem a string de planejamento em seu atributo de linha do tempo.

A matriz retorna um resultado e renderiza um componente . Vamos criar Card.js no mesmo diretório e adicionar o trecho de código abaixo:

import React from”react”; importar arrastável de”react-draggable”; exportar função padrão Card ({currentTask, tasks, addTask}) {return (

); }

O componente recebe três adereços, que são necessários para renderizar e excluir a lógica.

O div pai é importado de nossa biblioteca, tornando todo o cartão móvel. Por padrão, você pode mover o cartão para qualquer lugar da tela. No entanto, para evitar que ele saia de seu elemento pai, forneceremos um valor para uma propriedade de limites.

Excluindo a tarefa

Para remover uma tarefa, adicione o código abaixo:

const newTaskList=tasks.filter ((item)=> {if (item.id!=currentTask.id) {return item;}}); addTask (newTaskList);

O bloco de código acima obtém toda a lista de tarefas do App.js e, em seguida, cria uma nova lista que exclui a tarefa atual. A seguir, vamos importar cada componente em App.js:

import”./App.css”; import {useState} de”react”; import Header from”./Header”; importar o planejamento de”./Planning”; importar InProgress de”./InProgress”; importar Concluído de”./Concluído”; importar AddTaskForm de”./AddTaskForm”; função App () {const [tarefas, setTasks]=useState ([]); const [addItem, setAddItem]=useState (false); const handleSubmit=()=> {setAddItem (! addItem); }; const addTask=(tarefa)=> {setTasks (tarefa); }; return (

); } exportar aplicativo padrão;

Finalmente, adicionaremos estilos à nossa lista de tarefas. Adicione o seguinte código em App.css:

.mainGrid {display: flex; direção flexível: fileira; justify-content: espaço entre; flex-wrap: wrap; altura: 100vh; }.header {display: flex; direção flexível: fileira; justify-content: space-around; flex-wrap: wrap; cor de fundo: rgb (205, 240, 240)}.column {largura: 32vw; display: flex; direção flexível: coluna; borda: 5px cinza sólido; cor de fundo: azul; estouro: oculto; }.card {border: 1px sólido preto; cor de fundo: branco; }.card p {font-size: 10px; largura: 30vw; }.heading {display: flex; direção flexível: fileira; alinhar-itens: centro; justify-content: espaço entre; }.addButton {posição: absoluto; topo: 2,5%; esquerda: 0%; }.addForm {altura: 50vh; largura: 50vw; cor de fundo: azul claro; display: flex; alinhar-itens: centro; justificar-conteúdo: centro; direção flexível: coluna; posição: absoluta; topo: 25%; esquerda: 25%; }.addForm form {display: flex; alinhar-itens: centro; justificar-conteúdo: centro; direção flexível: coluna; }

Quando executamos o projeto e adicionamos um item à nossa lista de tarefas, a saída será semelhante à imagem abaixo:

Essas tarefas podem ser movidas dentro de seus respectivas colunas:

Para excluir uma tarefa, basta clicar no ícone excluir .

Conclusão

Adicionando movimento para componentes em seu aplicativo traz benefícios para sua IU, como melhor interesse visual e melhor organização. A biblioteca React-Draggable é uma ótima escolha por sua simplicidade e funcionalidade.

Neste tutorial, usamos React-Draggable para criar uma lista de tarefas. Para saber mais sobre React-Draggable, certifique-se de visitar a página GitHub .