Drag & Drop Com HTML5 | Aula 3 – Soltando Elementos | 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 desenvolvendo um kanban simples usando o recurso Drag & Drop de forma nativa com HTML5
O que vimos na aula passada?
Na aula passada, expliquei como tornar um elemento arrastável, o uso do evento dragstart e do objeto dataTransfer.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/11/22/drag-e-drop-com-html5-aula-2-tornando-um-elemento-arrastavel-sw9/].
O que veremos nesta aula?
Nesta terceira AULA, chegou o momento de explicar passo a passo como funciona o processo de mover e soltar os elementos usando os eventos dragover e drop, exibindo o resultado final no kanban simples que estou desenvolvendo em conjunto com vocês.
Onde soltar um elemento?
Após termos aprendido a tornar um elemento arrastável (no nosso caso os cards que fazem parte de nosso KanBan Simples) e de armazenar a informação que queremos manter durante o arraste e soltar, chegou o momento de definirmos a área onde o nosso card (elemento) pode ser solto (drop).
Esta área de soltura, tradicionalmente chamada de dropzone deve ser definida para que seja possível soltarmos o elemento arrastável nesta área.
Devemos então escolher qual ou quais os elementos farão parte da dropzone e associar o evento dragover para estes elementos. O procedimento é bem simples.
No caso do nosso KanBan Simples, será necessário associar o evento dragover aos dois elementos que correspondem aos estágios [Em Progresso e Concluído] do KanBan.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
Segue um exemplo de como ficaria o código:
<div class="col-md-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Em Progresso</h3> </div> <div class="panel-body" ondragover="overAction(event)"> <div class="alert-box primary" role="alert">Solte Itens Aqui</div> </div> </div> </div>
No nosso projeto, no momento que o elemento arrastável estiver dentro da dropzone, o evento dragover será disparado e chamará a função overAction.
Aqui vai uma dica importante: dentro da função overAction, nós devemos utilizar o preventDefault associado ao evento, para prevenir que o navegador se comporte de forma normal durante este processo.
O código da função overAction ficaria assim:
function overAction (event) { //Prevenir o comportamento normal do navegador event.preventDefault(); }
O que acontece quando um elemento é solto?
Depois de definida a dropzone, chegou o momento de compartilhar com vocês o que acontece quando um elemento é solto (drop).
Quando o usuário arrasta um elemento para dentro de uma zona de soltura (dropzone), ele tem a possibilidade de soltar o elemento nesta nova área. É neste momento que entra em jogo o evento drop.
Para cada elemento associado ao evento dragover, também devemos fazer o mesmo para o evento drop.
O código ficaria assim:
<div class="col-md-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Em Progresso</h3> </div> <div class="panel-body" ondragover="overAction(event)" ondrop="dropAction(event)"> <div class="alert-box primary" role="alert">Solte Itens Aqui</div> </div> </div> </div>
No momento que o evento drop é disparado, a função definida com o nome dropAction é chamada. Agora é a hora de vermos o que deve ser implementado nesta função.
O básico que precisamos ter em mente em um evento drop é:
1- Utilizar o preventDefault do mesmo modo como usamos na função overAction;
2- Recuperar os dados (dados de arraste) salvos durante o evento dragstart. Lembre-se que na implementação da função disparada por dragstart, usamos o objeto dataTransfer e o método setData para armazenarmos o id do elemento que está sendo arrastado. Para recuperar este id, basta usar o mesmo objeto dataTransfer com o método getData;
Usaremos o código a seguir:
const dados = event.dataTransfer.getData('text/plain');
3- Recuperar o elemento que está sendo arrastado a partir do id obtido pelo getData. Usaremos para isso o código abaixo:
const elemento = document.getElementById(dados);
4- Para finalizar, fazemos um appendChild deste elemento dentro da área onde realizamos a soltura (dropzone). A linha de código vai ficar:
event.target.appendChild(elemento);
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 3 – Soltando Elementos | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Expliquei passo a passo como funciona o processo de mover e soltar os elementos usando os eventos dragover e drop, exibindo o resultado final no kanban simples que estou desenvolvendo em conjunto com vocês.
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/rE56flJjpHs
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