Como usar a API HTML arrastar e soltar

Arrastar e soltar é um recurso essencial que aprimora a interação do usuário e facilita uma experiência de usuário perfeita. Esteja você procurando criar um uploader de arquivos, uma lista classificável ou um jogo interativo, entender como aproveitar os recursos desta API é uma habilidade crucial para se ter em sua web kit de ferramentas de desenvolvimento.

Os princípios básicos de arrastar e soltar em HTML

Em um sistema típico de arrastar e soltar, existem dois tipos de elementos: o primeiro tipo compreende elementos arrastáveis ​​que os usuários pode se mover com o mouse, e o segundo tipo inclui elementos que podem ser soltos que normalmente especificam onde os usuários podem colocar um elemento.

Para implementar arrastar e soltar, você deve informar ao navegador quais elementos você deseja que sejam arrastáveis. Para tornar um elemento arrastável pelo usuário, esse elemento deve ter um arrastávelAtributo HTML definido como verdadeiro, assim:

<divdraggable="true">This element is draggablediv>

Quando o usuário começa a disparar um evento de arrastar, o navegador fornece uma imagem "fantasma" padrão que normalmente fornece feedback sobre um elemento que está sendo arrastado.

Você pode personalizar esta imagem fornecendo sua própria imagem. Para fazer isso, selecione o elemento arrastável do DOM, crie uma nova imagem para representar a imagem de feedback personalizada e adicione um arrastarstart arraste o ouvinte de evento assim:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

No bloco de código acima, o setDragImage método tem três parâmetros. O primeiro parâmetro faz referência à imagem. Os outros parâmetros representam os deslocamentos horizontal e vertical da imagem, respectivamente. Ao executar o código no navegador e começar a arrastar um elemento, você notará que a imagem de arrastar personalizada foi substituída pela imagem personalizada definida anteriormente.

Se quiser permitir uma queda, você deve evitar o comportamento padrão cancelando ambos os dragenter e arraste sobre eventos, como este:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Compreendendo a interface DragEvent

JavaScript apresenta um DragEvent interface que representa uma interação de arrastar e soltar do usuário. Abaixo está uma lista de possíveis tipos de eventos sob o DragEvent interface.

• arrastar: o usuário dispara este evento enquanto arrasta um elemento.
• dragenda: este evento é acionado quando a operação de arrastar termina ou quando o usuário a interrompe. Uma operação típica de arrastar pode terminar liberando o botão do mouse ou pressionando a tecla Escape.
• dragenter: um elemento arrastado aciona esse evento quando entra em um destino de soltar válido.
• arrastar e sair: quando o elemento arrastado sai de um destino para soltar, esse evento é acionado.
• arraste sobre: quando o usuário arrasta um elemento arrastável sobre um destino para soltar, o evento é acionado.
• arrastarstart: o evento é acionado no início de uma operação de arrastar.
• derrubar: o usuário aciona esse evento quando solta um elemento em um destino de soltar.

Ao arrastar um arquivo para o navegador a partir de um ambiente externo ao navegador (por exemplo, o gerenciador de arquivos do sistema operacional), o navegador não aciona o arrastarstart ou dragenda eventos.

DragEvent pode ser útil se você quiser despachar um evento de arrastar personalizado programaticamente. Por exemplo, se você quiser um divisão para disparar eventos de arrastar personalizados no carregamento da página, veja como fazer isso. Primeiro, crie um novo personalizado DragEvent() assim:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

No bloco de código acima, customDragStartEvent representa uma instância de DragEvent(). Em customDragStartEvent, existem dois argumentos de construtor. O primeiro representa o tipo de evento de arrastar, que pode ser um dos sete tipos de eventos mencionados anteriormente.

O segundo argumento é um objeto com um transferência de dados chave que representa uma instância de Transferência de dados, sobre o qual você aprenderá mais posteriormente neste guia. Em seguida, pegue o elemento do qual deseja acionar o evento, no Modelo de objeto de documento (DOM).

const draggableElement = document.querySelector("#draggable");

Em seguida, adicione os ouvintes de eventos assim:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

No primeiro ouvinte de evento acima, o recurso de função de retorno de chamada registra o texto "Arraste iniciado!" e invoca o definir dados método no transferência de dados propriedade no evento objeto. Agora, você pode acionar eventos personalizados assim:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Transferindo dados com dataTransfer

O transferência de dados O objeto serve como uma ponte entre o elemento de origem (o item arrastável) e o elemento de destino (a área que pode ser solta) durante uma operação de arrastar e soltar. Ele atua como um contêiner de armazenamento temporário para dados que você deseja compartilhar entre esses elementos.

Esses dados podem assumir vários formatos, como texto, URLs ou tipos de dados personalizados, tornando-os uma ferramenta versátil para implementar uma ampla gama de funcionalidades de arrastar e soltar.

Usando setData() para empacotar dados

Para transferir dados de um elemento arrastável para um elemento solto, você usará o setData() método fornecido pelo transferência de dados objeto. Este método permite empacotar os dados que deseja transferir e especificar o tipo de dados. Aqui está um exemplo básico:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Quando um usuário começa a arrastar o elemento especificado, setData() empacota o texto "Olá, mundo!" com o tipo de dados texto/simples. Esses dados agora estão associados ao evento de arrastar e podem ser acessados ​​pelo destino que pode ser solto durante a operação de soltar.

Recuperando dados com getData()

No final do recebimento, dentro do ouvinte de evento de um elemento droppable, você pode recuperar os dados transferidos usando o comando Obter dados() método:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

O bloco de código acima recupera os dados com o mesmo tipo de dados (texto/simples) que foi definido usando o setData() método anteriormente. Isso permite acessar e manipular os dados transferidos conforme necessário dentro do contexto do elemento dropável.

Casos de uso para interfaces de arrastar e soltar

Integrar a funcionalidade de arrastar e soltar em seus aplicativos web pode ser um aprimoramento poderoso, mas é essencial entender quando e por que você deve implementá-la.

• Carregadores de arquivos: permitir que os usuários arrastem arquivos diretamente de sua área de trabalho ou gerenciador de arquivos para uma área designada simplifica o processo de upload.
• Listas classificáveis: se seu aplicativo envolver listas de itens, como listas de tarefas, listas de reprodução ou galerias de imagens, os usuários poderão apreciar a capacidade de reordenar itens arrastando e soltando.
• Painéis interativos: Para ferramentas de visualização de dados e relatórios, arrastar e soltar pode ser uma maneira poderosa para os usuários personalizarem seus painéis reorganizando widgets e gráficos.

Mantendo a acessibilidade em mente

Embora arrastar e soltar possa ser visualmente atraente e aprimorar a experiência do usuário, é crucial garantir que sua implementação permaneça acessível a todos os usuários, inclusive aqueles com deficiência. Forneça métodos alternativos de interação, como controles de teclado, para tornar seu aplicativo inclusivo.