Como utilizar a API de arrastar e largar HTML

Arrastar e largar é uma funcionalidade essencial que melhora a interação do utilizador e facilita uma experiência de utilizador sem problemas. Quer pretenda criar um carregador de ficheiros, uma lista ordenável ou um jogo interativo, compreender como aproveitar as capacidades desta API é uma competência crucial para ter no seu conjunto de ferramentas de desenvolvimento Web.

Noções básicas de arrastar e largar em HTML

a categoria inicial engloba elementos que podem ser manipulados com um dispositivo apontador, como um rato, e deslocados para áreas alternativas; enquanto a última categoria consiste em elementos que geralmente definem destinos designados para esses elementos, permitindo que os utilizadores os larguem nesses locais.

Para permitir a funcionalidade de arrastar e largar numa aplicação Web, é necessário especificar quais os elementos que se destinam a ser manipulados através da utilização do atributo “draggable” na marcação HTML correspondente. Ao definir o valor deste atributo como “verdadeiro”, como no exemplo fornecido, um determinado elemento pode ser movido ou reposicionado pelo utilizador na interface através de acções de arrastar e largar.

 <div draggable="true">This element is draggable</div>

Ao iniciar uma operação de arrastamento através de um evento de entrada gerado pelo utilizador, conhecido como “evento de arrastamento”, o navegador Web fornece convencionalmente uma representação de espaço reservado, designada por imagem “fantasma”. Este sinal visual serve para indicar e fornecer feedback relativamente ao estado ou progresso de um elemento que está a ser manipulado através do processo de arrastamento.

Tem a opção de personalizar esta ilustração fornecendo o seu próprio conteúdo visual no seu lugar. Isto pode ser conseguido escolhendo o componente móvel do Document Object Model (DOM), gerando uma nova imagem para servir como gráfico de feedback personalizado e incorporando um

 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);
})

O bloco de código acima mencionado demonstra a utilização do método setDragImage , que engloba três parâmetros de entrada. O parâmetro inicial alude à imagem pretendida, enquanto o par de parâmetros seguinte designa as respectivas deslocações horizontal e vertical da referida representação visual. Ao ser executado num navegador web e ao iniciar o ato de arrastar um elemento, torna-se evidente que a imagem de arrastamento predefinida foi substituída pela representação personalizada previamente configurada.

Para permitir uma libertação, é necessário contrariar a operação padrão, anulando as ocorrênciasdragenteredragover , conforme demonstrado abaixo:

 const dropElement = document.querySelector("drop-target");

dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});

dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Entendendo a interface DragEvent

O JavaScript fornece uma interface DragEvent, que encapsula a interação de arrastar e soltar de um usuário. A seguir estão alguns dos tipos de eventos associados a essa interface:

Durante o processo de arrastar um determinado elemento, o utilizador desencadeia o evento “drag”.

O evento “dragend” é despoletado após a conclusão de uma operação de arrastamento, quer devido à libertação do botão do rato, quer à pressão da tecla “escape”.

O evento dragenter é acionado por um elemento arrastado quando este se desloca sobre um alvo de largada válido, o que pode indicar uma ação ou interação que envolve a deslocação de dados de uma localização para outra numa interface de utilizador.

O evento “dragleave” é acionado quando um elemento que está a ser arrastado deixa de estar posicionado sobre ou em cima de um determinado alvo de largada. Este evento serve de contrapartida ao evento “dragenter”, que ocorre quando o elemento arrastado entra inicialmente num potencial alvo de largada.

Durante o processo de arrastar um componente manipulável através de uma área recetiva, é desencadeada uma ocorrência pela ação do utilizador.

Após o início, o evento “dragstart” é acionado para iniciar uma ação de arrastamento.

Após a receção da entrada do utilizador, iniciamos a ação “largar” no nosso sistema. Este evento é desencadeado quando o utilizador solta um item em cima de uma área-alvo designada para o efeito.

Quando os ficheiros são transferidos para um navegador Web através de meios externos, como a ferramenta de gestão de ficheiros de um sistema operativo, o navegador não inicia os eventos habituais “dragstart” ou “dragend” em resposta.

A utilização de DragEvent pode revelar-se vantajosa quando se pretende enviar um evento de arrastamento personalizado de forma algorítmica. A título de ilustração, suponhamos que se pretende iniciar eventos de arrastamento personalizados para um determinado elemento div aquando do carregamento da página. O processo implicaria a criação de uma nova instância de DragEvent , tal como mostrado abaixo:

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

const customDragEndEvent = new DragEvent('dragend');

No trecho de código mencionado acima, customDragStartEvent é uma instanciação da classe DragEvent() , contendo dois parâmetros de construtor. O parâmetro inicial indica o tipo específico de evento de arrastamento, abrangendo qualquer um dos sete tipos de eventos possíveis listados anteriormente.

O segundo parâmetro representa um objeto que contém uma propriedade denominada “dataTransfer”, que corresponde a uma instância da interface DataTransfer. Esta interface será explorada com mais pormenor ao longo deste guia. Para acessar o elemento desejado dentro do Modelo de Objeto de Documento (DOM), siga estas etapas…

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

Em seguida, adicione os ouvintes de eventos da seguinte forma:

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

  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

No ouvinte de eventos inicial, utilizamos uma função de retorno de chamada que registra a mensagem “O arrasto começou!”, enquanto também chamamos o método setData na propriedade dataTransfer do objeto de evento . Isto permite-nos iniciar eficazmente os nossos eventos personalizados de uma forma simples.

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

Transferindo dados com dataTransfer

O objeto de transferência de dados funciona como um conetor intermediário entre o elemento de origem, que é a entidade arrastável, e seu destinatário pretendido, ou a região soltável. Durante um processo de arrastar e largar, funciona como um repositório transitório concebido para armazenar informações que se destinam a ser partilhadas entre estas duas entidades.

A versatilidade destes dados é evidente através da sua capacidade de assumir múltiplos formatos, incluindo texto, URLS e tipos de dados personalizados, permitindo assim uma vasta gama de funcionalidades de arrastar e largar.

Utilizar setData() para empacotar dados

Para transmitir informações de um componente manipulável para um recetáculo, pode aproveitar as capacidades do método setData() fornecido pelo objeto dataTransfer . Esta abordagem permite-lhe encapsular os dados que pretende transmitir, especificando simultaneamente o seu tipo de dados. Apresenta-se de seguida uma ilustração fundamental:

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

Ao iniciarmos o ato de mover um item designado como tendo atributos específicos, enviamos uma mensagem contendo a informação “Olá, mundo!” num formato designado como text/plain. Este conteúdo fica interligado com a ação de arrastar e pode ser posteriormente recuperado pelo destinatário pretendido do objeto largado durante o processo de o libertar.

Recuperar dados com getData()

No âmbito de um elemento que possa ser objeto de drop upon e que se tenha registado para essa capacidade através da implementação de um event listener, é possível recuperar os dados que foram transmitidos utilizando o método getData() :

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

O segmento de código acima referido vai buscar informação com a mesma classificação de conteúdo (text/plain) que tinha sido estabelecida pelo procedimento setData() anterior. Consequentemente, isto permite obter e alterar os dados transmitidos de acordo com os desejos do ambiente do componente amovível.

Casos de utilização de interfaces de arrastar e largar

A incorporação de capacidades de arrastar e largar em aplicações Web tem um grande potencial de atualização, mas é crucial compreender as situações específicas e as razões para implementar esta funcionalidade.

Ao permitir que os utilizadores transfiram sem esforço ficheiros do explorador de ficheiros ou do ambiente de trabalho do seu computador através de uma zona de largada designada, o processo de submissão de conteúdos multimédia é simplificado e torna-se mais fácil de utilizar.

Em situações em que a interação de um utilizador com uma aplicação envolve listas de vários elementos, incluindo tarefas, ficheiros multimédia ou outros itens relevantes, fornecer-lhe os meios para reorganizar esses itens através da funcionalidade de arrastar e largar pode melhorar a sua experiência geral, oferecendo um método mais intuitivo e eficiente para organizar o conteúdo.

Para criar um dashboard interativo com visualização de dados e capacidades de criação de relatórios, a funcionalidade de arrastar e largar permite aos utilizadores reorganizar facilmente vários widgets e gráficos de acordo com as suas preferências. Esta funcionalidade permite que os utilizadores adaptem a sua experiência de dashboard às suas necessidades específicas em tempo real, melhorando a usabilidade e a flexibilidade gerais da plataforma.

Ter a acessibilidade em mente

Embora a atração visual da funcionalidade de arrastar e largar possa contribuir positivamente para a experiência geral de um utilizador, é imperativo garantir a sua acessibilidade a diversas capacidades. Para conseguir a inclusão, considere a incorporação de modos de interação suplementares, como opções de controlo baseadas no teclado, que acomodam indivíduos com deficiências e alargam o âmbito da usabilidade.