Drag & Drop Com HTML5 | Aula 4 – Trabalhando Com os Efeitos DND | 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, vimos todo o processo por trás de uma ação de soltar elementos. Onde soltar um elemento? O que acontece quando um elemento é solto? São perguntas que foram respondidas nesta aula.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/12/04/drag-e-drop-com-html5-aula-3-soltando-elementos-sw9].

O que veremos nesta aula?

Hoje veremos para que servem e como implementar as propriedades effectAllowed e dropEffect que exibem recursos visuais e permitem controlar os efeitos durante uma ação de arrastar e soltar.

Começando …

Em aplicações desktop tradicionais, você pode arrastar e soltar elementos com o objetivo de copiar objetos, movê-los e também criar links para as coisas.  Mas a pergunta é: eu posso fazer isso em aplicações web usando HTML5?  A resposta é sim

Você pode usar os eventos da API Drag & Drop para fazer o que já estamos acostumados em aplicações desktop.

Mas eu acredito que você gostaria de ir mais além. Permitir que a sua aplicação web também exiba indicadores visuais de acordo com o tipo de ação que um objeto arrastado pode fazer, e que tipo de ação uma dropzone pode aceitar.

Também seria interessante permitir apenas copiarmos objetos para uma dropzone. E assim por diante …

Felizmente, estes recursos podem ser implementados usando os métodos effectAllowed  e dropEffect, que fazem parte do objeto dataTransfer.

Mais a respeito de effectAllowed  

O método effectAllowed é usado em um elemento que está sendo arrastado.  A partir dele será possível definir o tipo de efeito que um objeto arrastável está habilitado a fazer.  Os tipos mais usados são copy, move, link.  Mas também existem outras alternativas como copyMove, copyLink e linkMove.

Caso o effectAllowed seja configurado como all, todos os efeitos serão permitidos, por outro lado, se for atribuído none, nenhum efeito será permitido.

Podemos usá-lo da seguinte forma em um evento dragstart:

event.dataTransfer.effectAllowed = 'copy';

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

Mais a respeito de dropEffect

O dropEffect é usado para definir qual o tipo de efeito uma dropzone está autorizada a aceitar. Os efeitos válidos são copy, move e link.

Podemos usá-lo em um evento dropover por exemplo.  O código ficaria assim:

event.dataTransfer.dropEffect = 'copy';

Recursos Visuais

Além de controlar os efeitos permitidos durante as operações de arrastar e soltar, são exibidos indicadores visuais de acordo com cada tipo de efeito que foi definido.

Desta forma, teremos um indicador visual para copy, outro diferente para move e outro para link.  Durante o vídeo vocês vão ter a oportunidade de ver cada um destes tipos em ação.

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 4 – Trabalhando Com os Efeitos DND | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.

Mostrei para que servem e como usar as propriedades affectAllowed e dropEffect disponíveis na API Drag & Drop.  Estes métodos permitem controlar os efeitos durante o ato de arrastar e soltar elementos.

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/qiU7y5ia1V8

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se