ago
12
Interface drag and drop com jQuery
comentários (13)publicado por Davi Ferreira . 12/08/2007 . 02:47
Customização é um dos principais conceitos da web 2.0 — deixar o usuário participar ativamente em seu website, seja com conteúdo ou com um visual personalizado. Neste artigo você confere como montar uma interface drag and drop (arrastar & soltar) utilizando a biblioteca javascript jQuery, permitindo ao usuário montar uma página a seu gosto, escolhendo a disposição dos boxes de conteúdo disponíveis no site.
Este tutorial é voltado para quem domina HTML e CSS e tem, pelo menos, uma relativa noção de javascript.
jQuery
Antes de começar, vamos falar um pouco da jQuery. Trata-se de um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e infinitamente mais elegante. Além de ser bem leve, a jQuery conta ainda com uma comunidade bastante ativa e uma vasta gama de plugins (seu ponto forte).
Veja a seguir um exemplo de código escrito em javascript convencional e uma versão do mesmo código com jQuery.
javascript:
jQuery
Notaram a diferença? Vamos entender o código jQuery, por partes:
$('#box') — o símbolo do dólar, seguido por parênteses, é o construtor da jQuery. Graças a ele você não precisa mais perder tempo digitando document.getElementById toda vez que precisar capturar um objeto HTML pelo id. O seletor $('#box') representa o elemento HTML de id box. Alguns outros exemplos de seletores são:
.css() — a propriedade .css funciona para exibir ou atribuir um valor CSS de um elemento HTML. No exemplo acima, atribuímos a cor "#ff0000" à propriedade background-color do nosso elemento de id box. Para exibir a propriedade ao invés de atribuir um valor, basta omitir o segundo parâmetro, por exemplo:
Confira algumas outras propriedades dos seletores jQuery:
É claro que isso não cobre quase nada do que a jQuery tem a oferecer. Para conferir a lista completa de seletores, comandos, propriedades e métodos visite o wiki do projeto em docs.jquery.com.
Arquivos necessários
A interface drag an drop que iremos desenvolver aqui utiliza os plugins de interface disponíveis neste link e nosso código será baseado no módulo Sortables.
O primeiro passo é declarar os arquivos javascript no <head> de nosso documento HTML.
Observação: neste exemplo, estamos utilizando uma versão completa do arquivo interface.js, com todos os seus módulos, mas nada impede (e eu até recomendo) que você utilize no seu projeto final uma versão compactada apenas com os módulos necessários. Você pode conferir a lista de dependências do Sortables acessando este link.
Downloads:
Elementos da interface
Agora vejamos o que é necessário, esquecendo um pouco a parte de javascript, para a construção de uma interface drag and drop. Que elementos vamos utilizar?
Sendo assim, definiremos as seguintes classes CSS para identificar os elementos de nossa interface:
No caso do handle não utilizaremos uma classe, mas sim um elemento específico: a tag <h2>.
Todos os elementos com a classe recebeDrag servirão de base para os elementos arrastáveis. Estes, por sua vez, virão acompanhados da classe itemDrag. O elemento de ajuda (dragAjuda) não precisa ser declarado no documento HTML — o plugin de interface da jQuery se encarrega de fazer isso, apenas o CSS precisa ser criado. Todo itemDrag deve ainda possuir um elemento H2 para arrastá-lo. Nossa estrutura ficou assim:
E o CSS:
Monte um documento HTML com o CSS acima e inclua quantas áreas e ítens quiser para efetuarmos nosso teste.
document.ready
Com nosso HTML pronto, agora resta apenas instanciar o elemento Sortable da jQuery. Ao invés de utilizar o bom e velho onload no body, vamos adotar uma abordagem mais elegante e garantida, já que espera todo o DOM ser carregado antes de ser executada. Ao final de nosso HTML, antes de fecharmos o <body>, utilizaremos o seguinte código javascript:
O comando/seletor $(document).ready funciona, de certa forma, como o <body onload>. Estamos solicitando que, ao carregar o documento, os elementos div com a classe recebeDrag sejam inicializados como objetos Sortables. Logo em seguida declaramos os parâmetros aceitos na nossa interface drag and drop, bem como as ações a serem executadas quando o elemento é mudado de lugar, quando tem início a ação de arrastar e quanto termina esta mesma ação.
O bloco dos parâmetros é bem simples. Primeiro, utilizando o parâmetro accept, definimos que os divs com a classe recebeDrag aceitarão apenas elementos com a classe itemDrag arrastados dentro deles. Os quatro parâmetros seguintes são referentes às classes e estilos CSS. helperclass define a classe do elemento que demarca áreas em que os divs itemDrag podem ser soltos. hoverclass e activeclass são as classes de estado active e hover para o elemento recebeDrag. Já o parâmetro opacity define o nível de transparência de um elemento, podendo variar de 0 a 1.
handle, conforme explicado anteriormente, define o elemento HTML que servirá como "link" para arrastar os divs itemDrag.
E, por fim, as ações:
Interface em ação
Clique aqui para conferir um exemplo bem simples da nossa interface drag and drop. O CSS e o javascript foram todos declarados no arquivo, basta exibir o código-fonte para entender melhor o funcionamento do nosso exemplo.
Para visualizar a versão final deste teste, visite o site beta do Democracia.
Sugestões de funcionalidades
Referências
Atualização [06/12/2008]
Muita gente me pergunta sobre isso, então aí vai um exemplo utilizando cookies para salvar o posicionamento e ordenação definidos pelo usuário.
Os cookies estão sendo gerenciados diretamente via javascript, através do plugin jCookie: http://plugins.jquery.com/project/cookie.
Confira o que mudou no código. Na propriedade onchange do elemento sortable adicionamos o método $.cookie() para criar um cookie relacionado à cada coluna:
E, após carregar o documento, verificamos se o cookie existe e definimos o posicionamento dos boxes nas colunas:
Simples, não? 
Só consegui fazer funfar no IE7 com a 1.1.2. Se quiser baixa daqui, usei no exemplo dos cookies: 
M2BRNET - Agência web