Este é o sétimo artigo da série sobre HTML 5. Se você está chegando agora, recomendo fortemente a leitura dos artigos anteriores pois, estão distribuídos de forma evolutiva.
Hoje apresentaremos um recurso muito útil em aplicações web de forma geral – Drag and Drop. Este recurso é especialmente importante fundamentalmente por uma característica: aproxima a experiência de UX (User eXperience) em grande escala de aplicações tradicionais desktop. É comum em nossas atividades do dia-a-dia com aplicações stand-alone, selecionar determinada janela e arrastá-la para outro ponto da tela, por exemplo. O recurso de drag and drop do HTML 5 proporciona uma experiência parecida de forma nativa no browser.
Drag and Drop
No contexto de aplicações web, drag and drop é o recurso que permite ao usuário selecionar determinado elemento de uma página e arrastá-lo para outra posição na mesma página. Este recurso é importante pois permite alto nível de personalização do ambiente operacional por parte do usuário, característica desejável pela maioria deles.
Para visualizar um exemplo de drag and drop em funcionamento, clique na imagem abaixo.
Atualmente, os browsers que oferecem suporte ao recurso de drag and drop são:
- Internet Explorer 9
- Firefox
- Chrome
- Safari (a partir da versão 5)
Como tornar um elemento “arrastável”
Todos os elementos em uma página HTML 5 são “arrastáveis”, desde que seja “setada” na configuração do elemento o valor “true” para o atributo “draggable“, conforme apresentado pela Listagem 1.
[html]
<img src=”caminho” id=”ID” draggable=”true” />
[/html]
Listagem 1. Tornando o elemento “arrastável”
É fundamental entender também que, para que o recurso de drag and drop funcione corretamente, algum código Javascript é necessário (esta é uma característica marcante do HTML 5: Javascript está sempre presente). Assim, para que possamos entender como se dá essa relação, considere o código apresentado pela Listagem 2.
[html]
<html lang=”en”>
<head>
<title>Drag and Drop – Exemplo 1</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-iblogpro.png” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″ />
</body>
</html>
[/html]
Listagem 2. Implementando um exemplo de drag and drop
O código apresentado pela Listagem 2 implementa o exemplo apresentado anteriormente neste post. A seguir, realizamos uma análise acerca dos principais conceitos disponibilizados no código apresentado.
-
Linhas 4, 5 e 6: criamos um trecho de código CSS para formatar o elemento DIV de destino (o qual chamamos no exemplo de “DivDestino”).
-
Linhas 8, 9, 10 e 11: dentro do trecho de código Javascript, criamos uma função chamada “allowDrop”. Como o próprio nome sugere, esta função possui a responsabilidade de permitir com que o movimento de drag and drop ocorra. Esta função é fundamental, pois, por padrão, HTML não permite que elementos sejam arrastados sobre outros. Através da execução de ev.preventDefault() temos esta ação garantida.
-
Linhas 13, 14, 15 e 16: criamos a função “drag“. Esta é a função que executa a transferência do objeto de um local na página para outro. Como é possível notar, o atributo “onDragStart” chama a função “drag“. O atributo ao qual nos referimos indica a ação que será realizada quando o elemento é interpretado. Através da chamada da função “drag” automaticamente é indicado ao browser que deve haver uma transferência de elementos (implementada pela linha ev.dataTransfer.setData(“Text”, ev.target.id)).
-
Linhas 15, 16, 17, 18, 19 e 20: quando um elemento é arrastado de um ponto x para um ponto y, um evento “ondrop” ocorre. O que fazemos aqui é chamar a função “drop“. Esta função basicamente realiza as seguintes operações:
-
Recuperamos os dados de tranferência e armazenamos na variável “data“.
-
Indicamos o novo local onde o elemento (LogoDrag) será solto.
-
Garantimos que a sobreposição de elementos possa ocorrer através de ev.preventDefault().
-
Conclusões
O suporte nativo do HTML 5 ao recurso de drag and drop mostra que a nova especificação converge cada vez mais para a construção de uma web que traga de forma cada vez mais marcante o conceito de RIA (Rich Internet Application).
Estude HTML 5. Com ele, estamos cada vez mais próximos de uma web livre de plugins e com maior poder de interatividade.
Forte abraço e até o próximo post. :-).
Pingback: HTML 5: Início, Meio e Fim – SVG – Parte 8 – Fabrício Sanchez