Drag & Drop Com HTML5 | Aula 7 – Arrastando do Desktop Para o Navegador | 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 encerramos a implementação de nosso kanban simples usando os principais recursos disponíveis na API Drag e Drop.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/12/20/drag-e-drop-com-html5-aula-6-como-definir-uma-imagem-de-arraste-sw9/].

O que veremos nesta aula?

Ainda aproveitando a onda sobre o uso do recurso de drag e drop (DND) de forma nativa usando a API Drag e Drop e HTML5, decidi compartilhar com vocês, como podemos arrastar arquivos do desktop para o navegador. O objetivo é implementar uma área de arquivos dentro da própria página onde o kanban simples for implementado. Dividi este projeto em duas AULAS e hoje daremos início a mais este desafio.

Introdução

Você sabia que com a API Drag e Drop é possível arrastar arquivos localizados em nosso PC para dentro de uma aplicação web? Show né? As possibilidades não param por aí 😀

Também é possível arrastarmos arquivos de uma aplicação Web (via janela do navegador) para o nosso PC, mas infelizmente não abordarei esta implementação nestas duas próximas AULAS.

Alternativa ao upload tradicional

O uso do recurso de arrastar e soltar arquivos é uma alternativa, e eu diria uma das melhores, se comparado ao modelo tradicional de upload de arquivos.

Em um cenário onde cada vez mais se pensa em experiência do usuário (UX), o uso de Drag e Drop para manipulação de arquivos é uma prática bem interessante aos olhos do usuário final.

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

Arrastando arquivos do PC para o navegador

Arrastar arquivos do Desktop para a sua aplicação web é possível usando os mesmos eventos e recursos que foram usados quando implementamos o Kanban básico.

A grande diferença fica por conta do tratamento especial que devemos fazer quando o evento drop (soltura) for acionado.

Mas este será assunto para a próxima AULA.

O que vamos implementar?

Ao longo destas duas aulas, você vai me acompanhar no seguinte desafio: criar uma área de soltura (dropzone) que estará autorizada a receber arquivos arrastados a partir de nossos computadores. Para cada novo arquivo arrastado e solto na dropzone, a página vai exibir informações básicas como: nome do arquivo, MIME type, tamanho em bytes e data da última alteração.

Esta nova área de soltura será criada na mesma página onde já existe o kanban simples (implementado nas aulas anteriores).

Bom, você topa o desafio? Então, logo abaixo, eu apresento o que iremos construir nesta aula, e na sequência você já estará preparado para assistir a Vídeo-Aula.

Quais são as atividades de hoje?

•  Apresentar o resultado final para vocês. Como vai ficar o projeto após seguirmos todos os passos ao longo das duas AULAS;

Após a apresentação, vamos começar a implementar a solução de acordo com as tarefas abaixo:

• Criar área, acima do kanban, chamada file zone. Esta nova área estará autorizada a receber os arquivos arrastados a partir do Desktop;
• Implementar o que será feito após o disparo do evento dragEnter: quando um arquivo entrar na dropzone (batizada de file zone), aplicar um efeito de opacidade nela;
• Implementar o que será feito após disparo do evento dragLeave: quando um arquivo deixar a dropzone (batizada de file zone), o efeito de opacidade deve ser removido;
• Implementar o que será feito durante o disparo do evento dragOver: configurar para que um card, que pertence ao kanban simples, não possa ser arrastado e solto em nossa file zone;

Por hoje é só. Chegou o momento de assistirmos a AULA preparada especialmente para vocês.

Na próxima AULA concluiremos o nosso desafio.

[Conclusão]

Na aula de hoje [Drag & Drop Com HTML5 | Aula 7 – Arrastando do Desktop Para o Navegador | Série HTML5 | SW9], mostrei como deve ficar o projeto após a conclusão da segunda aula, mostrei os itens que serão implementados nesta primeira AULA, e na sequência implementamos estes itens.

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/sPIu-Mabz38

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se