Índice
O efeito arraste e solte Consiste em pegar um elemento da página com um gesto do mouse, geralmente clicando sobre ele e arrastando esse elemento para uma área onde possa ser depositado, então dependendo da funcionalidade de nossa página, um novo evento ocorrerá ou não.Antigamente, isso era feito usando Bibliotecas e estruturas Javascript estilo jQuery, já que o suporte a HTML era limitado, porém com HTML5, temos essas funcionalidades já incluídas em nosso navegador.
Criando os elementos para arrastar
No documento HTML temos que definir os elementos que poderão utilizar este efeito, para isso temos algumas propriedades que nos ajudarão neste propósito.
Ao colocar o atributo arrastável a um elemento indicamos ao navegador que este elemento pode ou não ser arrastado, para isso o atributo tem os valores verdadeiro, falso e automático, como podemos inferir, verdadeiro informa ao navegador que se deve ser um elemento que é arrastado, falso caso contrário, ele desativa o efeito e auto diz ao navegador para tomar a decisão de ativar ou não o próprio efeito.
Uma boa prática é usar verdadeiro ou falso para indicar explicitamente se o efeito está ativado ou não, porque embora a maioria dos navegadores interprete o valor auto como verdadeiro, não devemos deixar o curso de nossa página para terceiros.
Eventos de efeito de arrasto
Antes de passar ao exemplo, vamos definir outra característica importante de arrastar um elemento, é que ao iniciar o arrasto de um elemento temos 3 eventos que podemos identificar e com os quais podemos realizar vários processamentos se quisermos , esses eventos são:
dragstart, é o início do evento de arrastar que ocorre ao posicionar o mouse sobre o elemento, clicar e começar a arrastar o referido elemento.
arrastar, isso acontece após o início do arrasto e dura todo o caminho em que estamos arrastando o elemento.
dragend, ocorre no momento em que paramos de arrastar o item, quer o deixemos na área de depósito, quer nos arrependamos e paramos de arrastá-lo até a metade.
Implementação de arrasto
Vamos ver abaixo um exemplo de como incorporamos tudo o que foi descrito acima em uma página, vamos criar uma lista de elementos aos quais vamos atribuir o atributo arrastável como verdadeiro, criaremos algumas classes css que nos permitirão modificar seus estilos e finalmente com os eventos mencionados ao arrastarmos um elemento ele mudará sua cor.
Vamos ver o código:
Exemplo
Deposite aqui
Agora, o que parece em nosso navegador:
