Drag & Drop Com HTML5 | Aula 2 – Tornando Um Elemento Arrastável | 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, começamos a falar sobre a API Drag & Drop, apresentando a funcionalidade de Arrastar & Soltar e usando o Modernizr para verificar se a API é compatível ou não com o navegador do usuário (feature detection).
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/11/20/drag-e-drop-com-html5-aula-1-apresentacao-e-feature-detection-sw9].
O que veremos nesta aula?
Nesta segunda AULA, vamos começar a implementar um KanBan Simples usando a API Drag & Drop com HTML 5. O próximo passo será escolher um elemento HTML e torná-lo arrastável, para que na sequencia seja possível explicar como funciona o evento dragstart, o objeto dataTransfer e o método setData.
Nosso workflow
Nós vamos seguir os seguintes passos para começar a implementar o recurso de Arrastar & Soltar em nosso KanBan básico:
1- Escolher o elemento que será arrastado e torná-lo arrastável;
2- Implementar o evento dragstart;
3- Armazenar os dados que serão arrastados utilizando o objeto dataTransfer e o seu método correspondente setData.
Tornando um elemento arrastável
Para começarmos a usar a API DnD, em primeiro lugar precisamos escolher qual será o elemento que vamos arrastar. Para nosso projeto, vamos escolher o elemento DIV que possui os dados relacionados a tarefa que queremos mover entre os estágios do Kanban.
Aqui vai uma dica importante: você pode escolher entre uma série de elementos para torná-los arrastáveis. Dentre eles posso citar IMAGENS, DIVS, TABLES, LINKS e TEXTOS.
Escolhido o elemento, o próximo passo é torná-lo arrastável. Mas como eu faço isso? O procedimento é bem simples, basta você incluir o atributo draggable e definí-lo como true dentro da tag DIV. Ficaria algo parecido com o código abaixo:
draggable='true'
Muito simples. Você não acha?
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
Usando o evento DragStart
Após tornar o elemento arrastável, chegou o momento de usarmos o evento dragstart.
Você precisa saber: A API Drag & Drop possui uma série de eventos que vão tornar o nosso caminho mais fácil. Ao longo das AULAS, vamos explicar e usar os mais importantes.
O evento dragstart é o primeiro evento que devemos utilizar durante o ato de Arrastar & Soltar. Este evento é disparado no momento que o usuário começa a arrastar o elemento.
Vamos incluir o evento dentro da própria tag DIV e definir qual a função que será chamada após disparo do evento.
O código alterado vai ficar assim:
draggable='true' ondragstart='dragStart(event)'
Armazenando os dados que serão arrastados
A API DnD possui um objeto chamado dataTransfer que por sua vez possui o método setData().
Mas para que serve este método? Onde devo utilizá-lo? O método setData serve para definir quais os dados que serão mantidos durante o arraste, e que serão
soltos ao término da ação do usuário.
Você deve usar o setData dentro da função chamada pelo evento dragstart. O método setData possui dois parâmetros. O primeiro é onde você define o tipo (mime type) do dado que você vai gravar. Já o segundo parâmetro é o valor do dado que será arrastado.
A implementação da função dragStart ficaria assim:
function dragStart (event) { event.dataTransfer.setData('text/plain', event.target.id); }
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 2 – Tornando Um Elemento Arrastável | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Mostrei como tornar um elemento arrastável (draggable), na sequencia usamos o evento dragstart que é disparado quando o usuário começa a arrastar um elemento e para finalizar chamamos o método setData para armazenar os dados que serão arrastados de um local para o outro.
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/A-Md849_1rs
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