Além dos diversos novos recursos do HTML5, existe um que é muito interessante e que com certeza muitos desenvolvedores acostumados com linguagens visuais, como Delphi, VB, irão gostar.
Na sua nova versão, o HTML5 trouxe um recurso chamado HTML5 Drag and Drop. Esse recurso nada mais é do que o bom e velho arrastar e soltar, como diz a própria tradução ao pé da letra.
Suporte
Os browsers que suportam a funcionalidade são:
- Internet Explorer 9
- Firefox
- Chrome
- Safari (a partir da versão 5)
Essa funcionalidade acontece porque os elementos html possuem uma propriedade chamada draggable e caso você a coloque com o valor true, ele passa a ser arrastável, como a própria tradução diz.
Listagem 1: Propriedade draggable
<img src=" logo-devmedia.png" id="ID" draggable="true" />
Uma coisa que todo desenvolvedor, iniciante ou avançado deve saber e entender é que a linguagem javascript está mais presente do que nunca no desenvolvimento web, portanto, por mais que o html5 ou o css3 tenham diversos recursos novos, sempre vai ser preciso usar um código ou outro Javascript, mas no caso desse exemplo não é nada muito complexo.
Vejamos então o código que irá fazer a função de drag and drop funcionar.
Listagem 2: Drag and Drop HTML5
<html lang="en">
<head>
<title>Drag and Drop HTML5 - DevMedia</title>
<style type="text/css">
#DivDestino { width:350px; height:70px; padding:10px; border:1px solid #aaaaaa; }
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="DivDestino" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="LogoDrag" src="logo-devmedia.png" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
O código é bem simples, temos um CSS para formatar a div de destino que será onde iremos “largar” a imagem que vamos arrastar. Já no código javascript, que falamos anteriormente, criamos uma função chamada “allowDrop” que irá “permitir” que o drag and drop ocorra. Ela é fundamental, pois por padrão o HTML não permite que elementos sejam arrastados sobre outros.
Criamos também a função “drag” que é a função que irá executar a transferência da imagem de um lugar da página para outro, ou seja, de onde estiver para dentro da div destino.
Figura 1: Resultado do código
Irei disponibilizar o exemplo feito para download no topo dessa página, caso queiram testar online, aqui irei colocar um DEMO desse efeito.
Conclusão
Com essa dica espero que os leitores do site tenham ficado ainda mais animados para ampliar seus estudos sobre essa maravilhosa linguagem, o HTML5, que cada vez mais se aproxima do conceito de RIA(Rich Internet Application).
Espero que tenham gostado e até a próxima.
