Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Você já quis adicionar a funcionalidade de arrastar e soltar aos seus componentes React? Não é tão difícil quanto você pode pensar.

Arrastar e soltar é uma maneira de mover ou manipular elementos em uma tela usando um mouse ou touchpad. É perfeito para reordenar uma lista de itens ou mover itens de uma lista para outra.

Você pode criar componentes de arrastar e soltar no React usando um dos dois métodos: recursos integrados ou um módulo de terceiros.

Diferentes maneiras de implementar arrastar e soltar no React

Existem duas maneiras de implementar arrastar e soltar no React: usando os recursos integrados do React ou usando um módulo de terceiros. Começar por criando um aplicativo React, em seguida, escolha seu método preferido.

Método 1: Usando recursos integrados

No React, você pode usar o evento onDrag para rastrear quando o usuário está arrastando um elemento e o evento onDrop para rastrear quando ele o solta. Você também pode usar os eventos onDragStart e onDragEnd para rastrear quando a ação de arrastar começa e para.

Para tornar um elemento arrastável, você pode definir o atributo arrastável como verdadeiro. Por exemplo:

importar Reagir, {Componente} de 'reagir';
aulaMeuComponenteestendeComponente{
 render() {
retornar (
<div
 arrastável
 onDragStart={esse.handleDragStart}
 onDrag={esse.handleDrag}
 onDragEnd={esse.handleDragEnd}
>
 Arraste-me!
</div>
 );
 }
}
exportarpadrão MeuComponente;

Para tornar um elemento soltável, você pode criar os métodos handleDragStart, handleDrag e handleDragEnd. Esses métodos serão executados quando um usuário arrastar o elemento e quando soltá-lo. Por exemplo:

importar Reagir, {Componente} de 'reagir';
aulaMeuComponenteestendeComponente{
 handleDragStart (evento) {
// Este método é executado quando o arrasto começa
 console.log("Iniciado")
 }


handleDrag (evento) {
// Este método é executado quando o componente está sendo arrastado
 console.log("Arrastando...")
 }


handleDragEnd (evento) {
// Este método é executado quando o arrasto para
 console.log("terminou")
 }


render() {
retornar (
<div
 arrastável
 onDragStart={esse.handleDragStart}
 onDrag={esse.handleDrag}
 onDragEnd={esse.handleDragEnd}
>
 Arraste-me!
</div>
 );
 }
}
exportarpadrão MeuComponente;

No código acima, existem três métodos para lidar com o arrastar de um elemento: handleDragStart, handleDrag e handleDragEnd. O div tem um atributo arrastável e define as propriedades onDragStart, onDrag e onDragEnd para suas funções correspondentes.

Ao arrastar o elemento, o método handleDragStart será executado primeiro. É aqui que você pode fazer qualquer configuração necessária, como definir os dados a serem transferidos.

Em seguida, o método handleDrag é executado repetidamente enquanto você arrasta o elemento. É aqui que você pode fazer qualquer atualização, como ajustar a posição do elemento.

Por fim, quando você solta o elemento, o método handleDragEnd é executado. É aqui que você pode fazer qualquer limpeza necessária, como redefinir os dados transferidos.

Você também pode mover o componente pela tela em onDragEnd(). Para fazer isso, você precisará definir a propriedade de estilo do componente. Por exemplo:

importar Reagir, { Componente, useState } de 'reagir';
funçãoMeuComponente() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);


const handleDragEnd = (evento) => {
setX(evento.clientX);
setY(evento.clientY);
 };


retornar (
<div
 arrastável
 onDragEnd={handleDragEnd}
 estilo={{
 posição: "absoluto",
 esquerda: x,
 topo: y
 }}
>
 Arraste-me!
</div>
 );
}
exportarpadrão MeuComponente;

O código chama o gancho useState para rastrear a posição x e y do componente. Em seguida, no método handleDragEnd, ele atualiza a posição x e y. Por fim, você pode definir a propriedade de estilo do componente para posicioná-lo nas novas posições x e y.

Método 2: usando um módulo de terceiros

Se você não quiser usar os recursos integrados do React, poderá usar um módulo de terceiros, como reagir-arrastar e soltar. Este módulo fornece um wrapper específico do React em torno da API de arrastar e soltar do HTML5.

Para usar este módulo, primeiro você precisa instalá-lo usando o npm:

npm instalar reagir-arrastar-e-derrubar--salvar

Então, você pode usá-lo em seus componentes React:

importar Reagir, {Componente} de 'reagir';
importar { Arrastável, Soltável } de 'reagir-arrastar e soltar';
aulaMeuComponenteestendeComponente{
 render() {
retornar (
<div>
<Tipo arrastável="foo" dados="bar">
<div>Arraste-me!</div>
</Draggable>


<Tipos que podem ser soltos={['foo']} onDrop={this.handleDrop}>
<div>Solta aqui!</div>
</Droppable>
</div>
 );
 }


handleDrop (dados, evento) {
// Este método é executado quando os dados caem
console.log (dados); // 'bar'
 }
}
exportarpadrão MeuComponente;

Comece importando os componentes Draggable e Droppable do módulo react-drag-and-drop. Em seguida, use esses componentes para criar um elemento arrastável e um elemento soltável.

O componente Draggable aceita uma propriedade de tipo, que especifica o tipo de dados que o componente representa, e uma propriedade de dados que especifica os dados a serem transferidos. Observe que o tipo é um nome personalizado que você pode escolher para acompanhar qual componente é qual em uma interface de vários componentes.

O componente Droppable usa uma propriedade de tipos para especificar os tipos de dados que você pode soltar nele. Ele também possui um suporte onDrop, que especifica a função de retorno de chamada que será executada quando você soltar um componente nele.

Quando você solta o componente arrastável no droppable, o método handleDrop será executado. É aqui que você pode fazer qualquer processamento necessário com os dados.

Dicas para criar componentes DnD fáceis de usar

Há algumas coisas que você pode fazer para tornar seus componentes de arrastar e soltar mais fáceis de usar.

Primeiro, você deve fornecer feedback visual quando um elemento estiver sendo arrastado. Por exemplo, você pode alterar a opacidade do elemento ou adicionar uma borda. Para adicionar efeitos visuais, você pode usar CSS normal ou CSS tailwind em seu aplicativo React.

Em segundo lugar, você deve certificar-se de que seus usuários só possam arrastar o elemento para um destino de soltura válido. Por exemplo, você pode adicionar o tipos atributo ao elemento, que especifica os tipos de componentes que ele aceitará.

Em terceiro lugar, você deve fornecer uma maneira para o usuário cancelar a operação de arrastar e soltar. Por exemplo, você pode adicionar um botão que permita ao usuário cancelar a operação.

Melhore a experiência do usuário com arrastar e soltar

O recurso de arrastar e soltar não apenas ajuda a melhorar a experiência do usuário, mas também pode ajudar no desempenho geral do seu aplicativo da web. Um usuário agora pode reorganizar facilmente a ordem de alguns dados sem precisar atualizar a página ou passar por várias etapas.

Você também pode adicionar outras animações em seu aplicativo React para tornar o recurso de arrastar e soltar mais interativo e fácil de usar.