Introdução
Arrastar e soltar é uma interação de usuário comum que pode ser encontrada em muitas interfaces gráficas de usuário.
Existem bibliotecas JavaScript pré-existentes para adicionar um recurso de arrastar e soltar ao seu aplicativo. No entanto, pode haver situações em que uma biblioteca não esteja disponível ou introduza uma sobrecarga ou dependência de que seu projeto não precisa. Nessas situações, o conhecimento das APIs disponíveis para você em navegadores modernos da web pode oferecer soluções alternativas.
A API HTML Drag and Drop depende do modelo de evento do DOM para obter informações sobre o que está sendo arrastado ou solto e para atualizar esse elemento ao arrastar ou soltar. Com manipuladores de eventos JavaScript, você pode transformar qualquer elemento em um item arrastável ou em um item que pode ser solto.
Neste tutorial, construiremos um exemplo de arrastar e soltar usando o recurso HTML Drag and Drop API com JavaScript vanilla para usar os manipuladores de eventos.
Pré-requisitos
Para concluir este tutorial, você precisará:
- Um navegador da web moderno que suporte a API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Etapa 1 – Criação do projeto e marcação inicial
Nosso projeto consistirá em um contêiner com dois tipos de elementos filhos:
- Elementos filhos que você pode arrastar
- Elementos filhos que podem ter elementos soltos neles
Primeiro, abra a janela do terminal e crie um novo diretório de projeto:
Em seguida, navegue até esse diretório:
Em seguida, crie um index.html arquivo nesse diretório:
Em seguida, adicione o código padrão para uma página da web HTML:
E entre <body> tags adicionam seu draggable item e seu dropzone (drop target):
Salve e feche o arquivo. Em seguida, crie um style.css arquivo:
Em seguida, adicione estilos para os elementos em nosso index.html arquivo:
Isso adicionará alguma formatação ao aplicativo. Agora você pode visualizar index.html no navegador e observar que isso produz um draggable <div> e a dropzone <div>.
Em seguida, tornaremos explicitamente o primeiro <div> arrastável adicionando o draggable atributo:
Salve e feche o arquivo.
Finalmente, visualize index.html no navegador novamente. Se clicarmos em draggable <div> e arrastá-lo pela tela, deve haver uma indicação visual de que ele está se movendo.
O valor padrão para o atributo draggable é auto. Isso significa que o fato de o elemento ser arrastável será determinado pelo comportamento padrão do seu navegador. Normalmente, isso significa que as seleções de texto, imagens e links podem ser arrastados sem especificar draggable="true".
Agora você tem um arquivo HTML com um elemento arrastável. Avançaremos para adicionar manipuladores onevent.
Etapa 2 – Tratamento de eventos de arrastar e soltar com JavaScript
Atualmente, se nós solte o mouse enquanto arrasta o elemento arrastável, nada acontece. Para acionar uma ação de arrastar ou soltar em elementos DOM, precisaremos utilizar a API Drag and Drop:
-
ondragstart: Este manipulador de eventos será anexado ao nosso elementodraggablee disparado quando umdragstartevento ocorrer. -
ondragover: Este manipulador de eventos será anexado ao nosso elementodropzonee disparado quando um eventodragoverocorrer. -
ondrop: Este manipulador de eventos também será anexado ao nosso elementodropzonee disparado quando umdropo evento ocorre.
Observação: há oito manipuladores de eventos no total: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart e ondrop. Para nosso exemplo, não exigiremos todos eles.
Primeiro, vamos fazer referência a um novo arquivo https://www.digitalocean.com/community/tutorials/script.js em nosso index.html:
Em seguida, crie um novo https://www.digitalocean.com/community/tutorials/script.js arquivo:
O objeto DataTransfer manterá o controle das informações relacionadas ao arrasto atual acontecendo. Para atualizar nosso elemento ao arrastar e soltar, precisamos acessar diretamente o objeto DataTransfer.Para fazer isso, podemos selecionar a propriedade dataTransfer do elemento DOM DragEvent.
Observação: o DataTransfer objeto pode tecnicamente rastrear informações para vários elementos sendo arrastados ao mesmo tempo. Para nosso exemplo, vamos nos concentrar em arrastar um elemento.
O método dataTransfer do objeto setData pode ser usado para definir as informações do estado de arrasto para o elemento arrastado no momento. Leva dois parâmetros:
- uma string que declara o formato do segundo parâmetro
- os dados reais sendo transferidos
Nosso objetivo é mover nosso elemento draggable para um novo elemento pai. Precisamos ser capazes de selecionar nosso elemento draggable com um id exclusivo. Podemos definir o id do elemento arrastado com o método setData para que possa ser usado mais tarde.
Vamos revisite nosso arquivo https://www.digitalocean.com/community/tutorials/script.js e crie uma nova função para usar setData:
Nota: O Internet Explorer 9 a 11 tem supostamente problemas com o uso do "text/plain". O formato precisa ser "text" para esse navegador.
Para atualizar o estilo CSS do item arrastado, podemos acessar seus estilos usando o evento DOM novamente e por definindo os estilos que quisermos para currentTarget.
Vamos adicionar à nossa função e alterar backgroundColor para yellow:
Observação: todos os estilos que você alterar precisarão ser atualizados manualmente novamente ao soltar se desejar estilos somente arrastar. Se você alterar qualquer coisa quando começar a arrastar, o elemento arrastado manterá o novo estilo, a menos que você o altere de volta.
Agora, temos nossa função JavaScript para quando começar a arrastar.
Podemos adicionar ondragstart ao elemento draggable em index.html:
Visualize index.html em seu navegador. Se você tentar arrastar seu item agora, o estilo declarado em nossa função será aplicado:
No entanto, nada acontecerá quando você libera seu clique.
O próximo manipulador de eventos disparado nesta sequência é ondragover.
O comportamento de soltar padrão para certos elementos DOM como <div> s em navegadores normalmente não aceita descartar. Este comportamento irá interceptar o comportamento que estamos tentando implementar. Para garantir que obtenhamos o comportamento de eliminação desejado, aplicaremos preventDefault.
Vamos revisitar o arquivo https://www.digitalocean.com/community/tutorials/script.js e crie uma nova função para usar preventDefault. Adicione este código ao final do arquivo:
Agora, podemos adicionar ondragover ao nosso dropzone elemento em index.html:
Neste ponto, ainda não escrevemos o código para lidar com a eliminação real. O manipulador de eventos final acionado nesta sequência é ondrop.
Vamos revisitar nosso arquivo https://www.digitalocean.com/community/tutorials/script.js e criar uma nova função .
Podemos fazer referência aos dados que salvamos anteriormente com o método dataTransfer do objeto setData. Usaremos o método dataTransfer do objeto getData. Os dados que definimos foram id, então é isso que nos será retornado:
Selecione nosso draggable elemento com o id que recuperamos:
Selecione nosso dropzone elemento:
Anexe nosso draggable elemento para o dropzone:
Redefina nosso objeto dataTransfer:
Agora, podemos adicionar ondrop ao nosso dropzone elemento em index.html:
Feito isso, temos um recurso completo de arrastar e soltar. Visualize index.html em seu navegador e arraste o elemento draggable para dropzone.
Nosso exemplo lida com o cenário de um único item arrastável e um único destino para soltar. Você pode ter vários itens arrastáveis, vários destinos de soltar e personalizá-los com todos os outros manipuladores de eventos da API de arrastar e soltar.
Etapa 3 – Construindo um exemplo avançado com vários itens arrastáveis
Aqui está mais um exemplo de como você pode usar esta API: uma lista de tarefas com tarefas arrastáveis da qual você pode mover uma coluna "To-do" para uma coluna "Done".
Para criar sua própria lista de tarefas, adicione mais elementos arrastáveis com id s para index.html:
Visualize index.html em seu navegador e arraste os itens da coluna Pendências para a coluna Concluído. Você criou um aplicativo de tarefas e testou a funcionalidade.
Conclusão
Neste artigo, você criou um aplicativo de tarefas para explorar a funcionalidade de arrastar e soltar que é disponível para navegadores da web modernos.
A API de arrastar e soltar oferece várias opções para personalizar suas ações, além de arrastar e soltar. Por exemplo, você pode atualizar o estilo CSS dos itens arrastados. Além disso, em vez de mover o item, você pode optar por copiar o item arrastável para que seja replicado ao soltar.
Lembre-se de que, embora muitos navegadores da web sejam compatíveis com essa tecnologia, você não pode confiar nele se o seu público consistir em dispositivos que não suportam essa funcionalidade.
Para saber mais sobre tudo que você pode soltar com a API Drag and Drop, verifique os documentos do MDN sobre ele.