Índice
Já na primeira parte deste tutorial vimos como iniciar o arrastar evento de arrastar os elementos, ou seja, fizemos uma parte do trabalho, vimos como interagir com os diferentes eventos daquela primeira seção.Agora precisamos saber como ativar a área onde depositar o elemento, já é a ação complementar que nos permitirá alcançar funcionalidades completas em nossa página.
Criação da área de depósito
Esta é a área onde vamos deixar os elementos que arrastamos, para manipular essa área vamos ter vários eventos, para entender melhor como lidar com esses eventos vamos listar cada um e explicar como funciona .
Eventos (editar)
- Dragenter: É ativado quando um elemento arrastado entra no espaço da tela que definimos para a área de depósito.
- Arraste sobre: É acionado quando o elemento arrastado se move dentro da área de depósito que já definimos.
- Dragleave: É ativado no momento em que um elemento arrastado sai da área de depósito.
- Derrubar: É o evento que é ativado quando um item é deixado na área de depósito.
Uma vez que saibamos quais eventos temos à nossa disposição, vamos construir um código simples, no qual ao soltar ou depositar um elemento que arrastamos, ele será exibido na área de depósito.
Para isso, usaremos algumas funções do HTML interno onde vamos clonar o elemento que é jogado na área.
Vamos ver o código de exemplo:
Exemplo
Solta aqui
Se olharmos de perto, definimos o elemento alvo como o elemento que irá conter a área de depósito, uma vez feito isso definimos o que vai acontecer em cada um dos eventos, se olharmos para o drop event é onde ocorre a etapa final, aqui vamos clonar o elemento arrastado e graças ao HTML interno vamos mostrá-lo de forma assíncrona quando soltarmos o elemento que estamos arrastando.
Outra coisa que devemos prestar atenção é substituir o evento padrão do navegador, gerenciamos isso ao criar a função handleDragDesta forma, evitamos que o navegador interprete as instruções de uma forma que não é esperada por nós.
Em nosso navegador, deve ser assim:
