Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Drag & Drop Com HTML5 | Aula 1 – Apresentação e Feature Detection | Série HTML5 | SW9

Drag & Drop Com HTML5 | Aula 1 – Apresentação e Feature Detection | 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.

Novo conjunto de AULAS chegando, agora para falar da API Drag And Drop que permite implementarmos o recurso de Arrastar e Soltar de forma nativa com HTML 5.

O que vimos na aula passada?

Na aula passada encerramos o tema Client Side Storage, explicando como utilizar Indexed Database em conjunto com o recurso Async/Await.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2018/11/08/client-side-storage-aula-10-indexeddb-com-async-await-html5-sw9/].

O que veremos nesta aula?

Esta será a nossa primeira Aula sobre a API Drag And Drop. Vamos fazer uma apresentação rápida sobre este recurso de Arrastar e Soltar, o que nós vamos implementar neste conjunto de AULAS, falar sobre a compatibilidade desta API em relação aos navegadores e vamos começar o nosso projeto implementando a detecção deste recurso com o apoio da biblioteca Modernizr.

Drag & Drop Com HTML 5

Eu acredito que a grande maioria das pessoas que já trabalharam ou trabalham com projetos Web já ouviu falar ou já precisou implementar esta fantástica funcionalidade em seu projeto.

Eu estou falando da funcionalidade Drag & Drop ou se preferir Arrastar & Soltar ou ainda DnD.

Já faz bastante tempo que este recurso existe. No passado, a implementação era mais complexa e não haviam muitos projetos utilizando este recurso.  À medida que o tempo foi passando, foram surgindo bibliotecas Javascript para facilitar o uso deste recurso na Web e o número de sites e aplicações web começaram a usá-lo com mais frequencia.

Posso citar aqui dois grandes exemplos de aplicações web que utilizam o Drag & Drop, são elas o Trello e o Jira.  O destaque fica para a utilização do Drag & Drop no Kanban, trazendo a possibilidade de movimentar as tarefas entre os estágios de forma rápida e prática.

DnD traz ao usuário final uma experiência e usabilidade incríveis e as aplicações não param por aí: O DnD também é usado com frequencia em listas (movimentação e ordenação de listas) e também fazendo parte de componentes de upload de imagens.

Agora vem a boa notícia: Com o surgimento do HTML 5, veio a tona uma API Drag & Drop que nos permite implementar este recurso de forma nativa.  E é justamente neste contexto que nós entramos.

O que nós vamos implementar?

Com o apoio de vocês, eu vou implementar um KanBan básico usando a API Drag & Drop Com HTML 5. Vocês vão perceber como é simples e rápido usar o DnD de forma nativa. A cada nova AULA, uma parte do KanBan será completada e teremos contato com os recursos mais importantes desta API.

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

Compatibilidade com os navegadores

API Drag & Drop, assim como inúmeros outros recursos web, possui o seu índice de incompatibilidade se formos considerar o grande universo de navegadores disponíveis no mercado.

Confesso que no passado esta compatibilidade era menor, mas ao longo do tempo foi melhorando e hoje temos um índice muito bom de compatibilidade como podemos observar na imagem abaixo extraída do site Can I Use:

DnD - Tabela de Compatibilidade

Se preferir você pode acessar o Can I Use diretamente a partir deste link: https://caniuse.com/#search=drag%20and%20drop

Detecção de recurso usando Modernizr

Sabendo desta incompatibilidade, nada melhor do que implementarmos em nosso projeto um mecanismo de detecção de recurso que nos permita identificar se o navegador do usuário é compatível com DnD no momento que ele acessa a página.

Vamos começar o nosso projeto Drag & Drop Com HTML 5 usando a biblioteca Modernizr para detectar a compatibilidade do DnD com base no navegador do usuário.

Nesta AULA eu não vou explicar passo a passo como instalar e configurar o Modernizr. Para quem quiser saber mais sobre esta biblioteca, eu tenho um conjunto de AULAS onde falo praticamente tudo o que você precisa saber sobre Modernizr. É só acessar https://www.youtube.com/playlist?list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

O processo de detecção do Drag And Drop é diferente da maioria dos outros recursos. Enquanto recursos como Canvas e Geolocation, o Modernizr cria uma propriedade do tipo booleano para teste.

Exemplo:

 if (Modernizr.canvas) 

ou

 if (Modernizr.geolocation) 

Para o Drag And Drop nós temos como melhor alternativa utilizar o método [hasEvent]. Devemos ativar este método na configuração da biblioteca Modernizr, e na sequencia utilizá-lo para validar a existência/compatibilidade dos eventos [dragstart] e [drop], que são os principais eventos da API Drag & Drop.

O resultado do teste ficaria assim:

	if (Modernizr.hasEvent('dragstart') AND Modernizr.hasEvent('drop')) {
		console.info('Drag And Drop Compatível');
	} else {
		console.info('O Navegador atual não dá suporte ao recurso DnD!!!');
	}

Este tipo de validação vai nos permitir implementar uma solução DnD alternativa (biblioteca Javascript por exemplo)

caso o navegador do usuário não possua compatibilidade com a API Drag & Drop nativa do HTML 5.

Bom Pessoal.  Por hoje é só :-)

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [Drag & Drop Com HTML5 | Aula 1 – Apresentação e Feature Detection | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.

Fiz uma apresentação rápida sobre este recurso de Arrastar e Soltar, o que nós vamos implementar usando DnD, falei sobre a compatibilidade desta API em relação aos navegadores e começamos o nosso projeto implementando a detecção deste recurso com o apoio da biblioteca Modernizr.

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

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

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?