TL; DR – API de arrastar e soltar em HTML5 permite que você pegue um objeto HTML com o cursor e arraste-o para outro lugar.
O que você pode arrastar e soltar no HTML5?
O HTML5 permite que você torne qualquer elemento arrastável, permitindo que você o pegue com o cursor e arraste-o para um local diferente que é definido como um elemento soltável. No exemplo abaixo, tente arrastar uma imagem para um quadrado:
Essa funcionalidade simplifica a experiência do usuário e ainda permite a criação de jogos online simples (por exemplo, você pode arrastar e soltar peças de xadrez virtual). Quando você arrasta um elemento, sua réplica transparente se move junto com seu cursor até que você o solte, liberando o botão do mouse.
Tecnicamente, Arrastar e Soltar é uma API JavaScript adicionada ao HTML5. Portanto, é importante ter pelo menos conhecimento básico de script para poder trabalhar com esta funcionalidade.
Eventos para arrastar e soltar HTML5
Na tabela abaixo, você verá todos os eventos relevantes para a funcionalidade Arrastar e Soltar:
| Evento | Explicação |
|---|---|
| arrastar | O cursor se move enquanto arrasta um elemento |
| soltar | O processo de arrastar termina |
| dragstart | O cursor pega o elemento e começa a arrastar |
| dragend | O botão do mouse é liberado, soltando o elemento |
| dragenter | O cursor entra no elemento de destino |
| dragleave | O cursor sai do elemento de destino |
| dragover | O cursor se move sobre o elemento de destino |
Explicação passo a passo de arrastar e soltar
A codificação de arrastar e soltar do HTML5 parece bastante complicada à primeira vista, pois inclui scripts em JS. No entanto, vamos estudar cada parte do processo para torná-lo mais fácil de entender.
Elementos arrastáveis
Primeiro, você deve ter certeza de que o elemento que deseja arrastar tem um Atributo HTML5 draggable aplicado e seu valor definido como true:
Arrastando
Em seguida, defina o que deve acontecer depois de arrastar um objeto. Você pode fazer isso chamando um manipulador de eventos para um evento dragstart e definindo uma função a ser executada.
O valor e o tipo de dados dos dados arrastados devem ser definidos pelo dataTransfer.setData() método:
Soltando
Os dados arrastáveis do HTML5 são especificados anexando um manipulador de eventos ao evento dragover.
Elementos e dados não podem ser colocado em outros elementos por padrão. Isso significa que você deve interromper os comportamento padrão usando o método event.preventDefault():
Um evento drop ocorre quando os dados arrastáveis do HTML5 são soltos. É chamado pelo manipulador de eventos ondrop:
O código final: um exemplo
Basicamente, você precisa que seu código seja capaz de execute quatro etapas:
- Evite a ação padrão do navegador da web relacionada aos dados chamando
preventDefault() - Obtenha os dados com o
dataTransfer.getData()método - Afixe o elemento arrastado no elemento soltar
Vamos ver como funciona no exemplo abaixo:
HTML5 arrastar e soltar: dicas úteis
- Você pode arrastar vários tipos de elementos, incluindo, mas não se limitando a arquivos, links, imagens e texto.
- Você também pode arrastar vários elementos de uma vez. No entanto, é recomendado ter todos no mesmo formato para consistência.
- Os elementos do formulário que aceitam entrada do usuário podem ser áreas para soltar por padrão.