Drag & Drop Com HTML5 | Aula 6 – Como definir uma imagem de arraste? | 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, aprendemos para que servem e como usar os eventos dragenter e dragleave.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/12/18/drag-e-drop-com-html5-aula-5-eventos-dragenter-e-dragleave-sw9].
O que veremos nesta aula?
Hoje eu vou mostrar para vocês um recurso bem interessante, e que faz parte da API Drag & Drop. Estou falando na possibilidade de definir uma imagem que será exibida durante a ação de arrastar um elemento. É mais comum chamarmos esta imagem de: imagem de arraste.
Quando trabalhamos com a API Drag & Drop, de forma automática já é definida uma imagem de arraste padrão. Geralmente o navegador exibe a própria imagem do elemento que está sendo arrastado, ficando posicionada próximo ao cursor do mouse.
Mas a ótima notícia é que podemos definir a nossa própria imagem de arraste, e desta forma incrementar o visual de nosso projeto
Como definir a nossa própria imagem de arraste?
Em primeiro lugar, você precisa saber que a definição de uma imagem de arraste deve ser feita dentro da função que é acionada pelo evento dragstart. Para o nosso projeto, vamos incluir o código para definição da imagem de arraste na função dragStart.
O próximo passo é criar um elemento imagem usando Web API e o construtor Image(). O nosso código vai ficar assim:
//Definindo uma imagem de arraste const img = new Image(32, 32);
Os parâmetros que uso no código se referem a altura e largura do elemento que estou criando.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
Criado o elemento, chegou o momento de definir a propriedade src. No src nós vamos colocar o caminho relativo da imagem que queremos definir como imagem de arraste. A nova versão do código vai ficar assim:
//Definindo uma imagem de arraste const img = new Image(32, 32); //Obtendo uma imagem vetorial ou não img.src = 'images/task-32px.png';
Para finalizar, usaremos o método setDragImage que faz parte da API Drag & Drop. Este método será responsável por definir/configurar qual imagem de arraste será exibida.
Devemos usá-lo da seguinte forma:
event.dataTransfer.setDragImage(p1, p2, p3), onde: p1 = elemento imagem p2 = posição eixo x p3 = posição eixo y
O código completo vai ficar assim:
//Definindo uma imagem de arraste const img = new Image(32, 32); //Obtendo uma imagem vetorial ou não img.src = 'images/task-32px.png'; //setDragImage - parametros: imagem, deslocamento eixo x, deslocamento eixo y //Se não definir, vai pegar como default o elemento que está sendo arrastado //Se definir como setDragImage(event.target, -20, -30) - Vai pegar o elemento default e ajustá-lo conforme coordenada //Se definir como setDragImage(img, -20, -30) - Vai usar a imagem customizada que criamos como referência event.dataTransfer.setDragImage(img, -20, -30);
Como vocês podem ver nos comentários do código, existem 3 situações relacionadas com a definição de imagem de arraste.
O que mais você deve saber?
1- É possível utilizar qualquer tipo de imagem, seja ela vetorial ou não. Dentre os formatos suportados posso citar: gif, png, jpeg e svg.
2- O método setDragImage também aceita um elemento do tipo canvas. Legal né?
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 6 – Como definir uma imagem de arraste? | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Aprendemos a definir uma imagem de arraste diferente da imagem padrão, que é exibida durante toda a ação de arrastar um 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/x3rBh_Xgpbc
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