Drag & Drop Com HTML5 | Aula 5 – Como usar os eventos DragEnter e DragLeave | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
Neste momento estamos vendo como implementar Drag & Drop de forma nativa com HTML 5.
O que vimos na aula passada?
Na aula passada, apresentei as propriedades effectAllowed e dropEffect que exibem recursos visuais e permitem controlar os efeitos durante uma ação de arrastar e soltar.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/12/06/drag-e-drop-com-html5-aula-4-efeitos-drag-e-drop-sw9/].
O que veremos nesta aula?
Hoje eu tenho o prazer de apresentar outros dois eventos que fazem parte da API Drag & Drop e que vocês não podem deixar de conhecer
Estou falando dos eventos DragEnter e DragLeave. Como complemento da AULA, eu também vou passar rapidamente pelo evento DragEnd e aplicar um efeito de transparência no elemento que está sendo arrastado.
O que você precisa saber sobre DragEnter?
O dragEnter é um evento disponível na API Drag & Drop que é disparado no momento que um elemento arrastável entra em uma zona de soltura (dropzone).
Sabendo desta característica, é possível, por exemplo, implementarmos um recurso visual com base em estilos CSS, que vai ser exibido no momento que o elemento que estamos arrastando entrar em uma dropzone. Quem nunca viu, por exemplo, o efeito que existe no Gmail quando arrastamos um arquivo que será anexado ao email? Quando arrastamos um arquivo para ser anexado, o Gmail exibe um retângulo pontilhado e a mensagem ‘Solte os Arquivos Aqui’.
Nesta AULA nós vamos fazer o mesmo, e isso será possível graças ao evento dragEnter.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
O que você precisa saber sobre DragLeave?
Por outro lado, o dragLeave é um evento que é disparado no momento que um elemento arrastável sai de uma área de soltura (dropzone). Pensando nisso, podemos aplicar um conjunto de estilos apenas no momento que este evento é disparado.
Em nosso projeto, este evento será usado para remover o conjunto de estilos que foram aplicados durante o evento dragEnter.
Resumindo …
Após implementação destes dois eventos, o comportamento será o seguinte:
1- Usuário arrasta elemento para uma dropzone;
2- O evento dragEnter é disparado e será exibido um retângulo pontilhado com a mensagem [Solte Itens Aqui];
3- O usuário move o elemento para fora da área de soltura (dropzone);
4- O evento dragLeave é disparado e remove o estilo aplicado durante o evento dragEnter. Desta forma, o retângulo pontilhado deixa de ser exibido.
Bom Pessoal, agora chegou o momento de colocarmos a mão na massa assistindo o vídeo que eu preparei.
[Conclusão]
Na aula de hoje [Drag & Drop Com HTML5 | Aula 5 – Como usar os eventos DragEnter e DragLeave | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Falamos do evento DragEnter, que é disparado no momento que o elemento entra em uma dropzone, e do evento DragLeave, disparado quando o elemento sai da dropzone. Implementamos os dois eventos em nosso projeto KanBan Simples, gerando um efeito visual diferente para cada uma destas situações. Finalizamos a AULA implementando um efeito de transparência durante o arraste de cada elemento.
Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta HTML5/DND. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/KM7nrCA0C3U
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário