Davi Ferreira blog! » Interface drag and drop com jQuery (atualizado) http://www.daviferreira.com/blog/2009/09/28/interface-drag-and-drop...

Interface drag and drop com jQuery (atualizado)

comentários (1)publicado por Davi Ferreira . 28/09/2009 . 19:11

Muita gente chega no meu blog pesquisando por "drag and drop". Em respeito a esses leitores resolvi dar
uma atualizada no meu primeiro artigo sobre o tema. Na época em que foi publicado, ainda não existia a
parte de interface oficial do jQuery – muitos elementos, aliás, foram incorporados dos plugins de interface
não-oficiais do site eyecon.ro.

Com o lançamento oficial dos plugins ui.jQuery ficou muito mais fácil desenvolver aquela mesma
interface drag and drop do primeiro artigo. Agora, com duas linhas de configuração você já consegue criar
duas colunas com boxes configurados para arrastar e soltar.

texto sem formatação imprimir ?

01. $("#drop‐direita").sortable({connectWith: ["#drop‐esquerda"]});

02. $("#drop‐esquerda").sortable({connectWith: ["#drop‐direita"]});

UPDATE: Na verdade, precisamos de apenas uma linha. Não tinha me ligado que dá pra fazer a conexão
dos sortables com uma classe. Fica assim:

texto sem formatação imprimir ?

01. $('.recebeDrag').sortable({connectWith: ['.recebeDrag']});

A diferença agora é que não necessitamos mais dos eventos Draggable and Droppable (por mais irônico
que isso possa parecer). O método Sortable resolve tudo sozinho.

Para saber mais sobre a biblioteca de interface do jQuery acesse o site: ui.jquery.com. Lá você conhece
outros efeitos e widgets.

Demonstração
Download do código-fonte

Aproveitando o upgrade do artigo, vou implementar algumas funções muito solicitadas via e-mail:

Salvar o posicionamento dos boxes em um cookie e lembrar na próxima visita.

Minimizar e remover os boxes.

Configuração inicial

Vamos manter a mesma estrutura do artigo anterior, com elementos DIV da classe 'recebeDrag' servindo
de base para os DIVs com a classe itemDrag. O pulo do gato aqui é a opção 'connectWith' do sortable.
Com este parâmetro ligamos dois ou mais elementos para funcionarem como objetos que permitam

1 de 4 29/09/2009 23:52
Davi Ferreira blog! » Interface drag and drop com jQuery (atualizado) http://www.daviferreira.com/blog/2009/09/28/interface-drag-and-drop...

Com este parâmetro ligamos dois ou mais elementos para funcionarem como objetos que permitam
ordenação entre si. Está feito nosso drag and drop.

Caso adicionássemos uma terceira coluna, #drop-meio, por exemplo, nosso código ficaria assim:

$("#drop-esquerda").sortable({connectWith: ["#drop-direita","#drop-meio"]});
$("#drop-meio").sortable({connectWith: ["#drop-direita","#drop-esquerda"]});
$("#drop-direita").sortable({connectWith: ["#drop-esquerda","#drop-meio"]});

No arquivo final do exemplo, utlizei alguns métodos do sortable para melhorar o visual e os efeitos do
nosso drag and drop. São eles:

placeholder: aqui definimos que a classe 'dragHelper' vai servir para indicar a área vazia que estará
recebendo o elemento arrastado.
scroll: marcando a opção scroll como true, obrigamos a barra de rolagem do navegador a ir até a
posição do mouse.
revert: essa é firula total, apenas adiciona um efeito de transição quando um elemento é liberado.

Nossa chamada fica assim:

texto sem formatação imprimir ?

01. $('.recebeDrag').sortable({
02. connectWith: ['.recebeDrag'],
03. placeholder: 'dragHelper',
04. scroll: true,
05. revert: true,
06. stop: function( e, ui ) {
07. salvaCookie();
08. }
09. });

Cookie de posicionamento
Sim, no código acima já deixei preparado a função para salvar nosso cookie. Pra ela funcionar direitinho,
precisamos primeiro do plugin jquery.cookie.

Quando termina o movimento de arrastar e soltar, através da opção 'stop', executamos a função
salvaCookie(). A função grava em dois índices de um array a sequência de IDs dos elementos de cada box
(esquerda e direita) utilizando o método toArray.

texto sem formatação imprimir ?

01. var salvaCookie = function() {

02. var ordem = $('#drop‐esquerda').sortable('toArray');
03. ordem += '|' + $('#drop‐direita').sortable('toArray');
04. $.cookie('df_draganddrop', ordem);
05. };

E, toda vez que a página é carregada, o jQuery busca pelo cookie 'df_draganddrop' (pode ser o nome que
você quiser) e configura o posicionamento dos boxes. O ideal é fazer isso via PHP (ou qualquer linguagem
de programação que você esteja utilizando), desenvolvi em javascript só para ter um exemplo mais básico.

texto sem formatação imprimir ?

01. if( $.cookie('df_draganddrop') ) {

02. var ordem = $.cookie('df_draganddrop').split('|');
03. // posiciona boxes nos containers certos
04. $('#drop‐esquerda div.itemDrag').each(function(){
05. if( ordem[0].search( $(this).attr('id') ) == ‐1 ) $('#drop‐
direita').append($(this));
06. });
07. $('#drop‐direita div.itemDrag').each(function(){

2 de 4 29/09/2009 23:52
Davi Ferreira blog! » Interface drag and drop com jQuery (atualizado) http://www.daviferreira.com/blog/2009/09/28/interface-drag-and-drop...

07. $('#drop‐direita div.itemDrag').each(function(){

08. if( ordem[1].search( $(this).attr('id') ) == ‐1 ) $('#drop‐
esquerda').append($(this));
09. });
10. // ordena containers
11. var esquerda = ordem[0].split(',');
12. for( i = 0; i< = esquerda.length; i++ ) $('#drop‐
esquerda').append($('#'+esquerda[i]));
13. var direita = ordem[1].split(',');
14. for( i = 0; i<= direita.length; i++ ) $('#drop‐direita').append($('#'+direita[i]));
15. } else {
16. $.cookie('df_draganddrop', '', { expires: 7, path: '/' });
17. }

Primeiro verificamos se o cookie já existe. Se não existir, criamos um novo cookie com validade de uma
semana.

Minimizando e removendo
Outro funcionamento muito legal é minimizar e remover boxes, personalizando totalmente uma listagem
de conteúdos. Por ser um exemplo bem básico, não vamos salvar nada disso em nosso cookie de
posicionamento. O ideal seria, para poder excluir no cookie, ter uma opção de adicionar boxes. Fica aí
como dever de casa!

Para minimizar utilizaremos o efeito slideUp nativo do jQuery, mas nada impede você de utilizar fade ou
animate. A opção de remover utiliza o fadeOut. Determinamos através do método bind que os links com
as classes 'lnk-minimizar' e 'lnk-remover', nos seus respectivos cliques, minimizam e removem boxes de
nossa interface drag and drop.

texto sem formatação imprimir ?

01. $('.lnk‐minimizar').click(function(){
02. var ul = $(this).parent().parent().parent().find('ul');
03. if( $(ul).is(':visible') ) {
04. $(ul).slideUp();
05. $(this).html('[ + ]');
06. } else {
07. $(ul).slideDown();
08. $(this).html('[ ‐ ]');
09. }
10. return false;
11. });
12.
13. $('.lnk‐remover').click(function(){
14. $(this).parent().parent().parent().fadeOut();
15. return false;
16. });

Código javascript final

Segue abaixo o javascript completo. Não deixe de fazer o download dos arquivos de exemplo, com todo o
HTML/CSS e Javascript necessário. E se publicar um site com essa interface não deixe de mandar o link
nos comentários!

texto sem formatação imprimir ?

01. $(function(){
02. // configura drag and drop
03. $('.recebeDrag').sortable({
04. connectWith: ['.recebeDrag'],
05. placeholder: 'dragHelper',
06. scroll: true,
07. revert: true,
08. stop: function( e, ui ) {
09. salvaCookie();

3 de 4 29/09/2009 23:52
Davi Ferreira blog! » Interface drag and drop com jQuery (atualizado) http://www.daviferreira.com/blog/2009/09/28/interface-drag-and-drop...

09. salvaCookie();
10. }
11. });
12. // minimizar boxes
13. $('.lnk‐minimizar').click(function(){
14. var ul = $(this).parent().parent().parent().find('ul');
15. if( $(ul).is(':visible') ) {
16. $(ul).slideUp();
17. $(this).html('[ + ]');
18. } else {
19. $(ul).slideDown();
20. $(this).html('[ ‐ ]');
21. }
22. return false;
23. });
24. // remover box
25. $('.lnk‐remover').click(function(){
26. $(this).parent().parent().parent().fadeOut();
27. return false;
28. });
29. // configuração inicial do cookie
30. if( $.cookie('df_draganddrop') ) {
31. var ordem = $.cookie('df_draganddrop').split('|');
32. // posiciona boxes nos containers certos
33. $('#drop‐esquerda div.itemDrag').each(function(){
34. if( ordem[0].search( $(this).attr('id') ) == ‐1 ) $('#drop‐
direita').append($(this));
35. });
36. $('#drop‐direita div.itemDrag').each(function(){
37. if( ordem[1].search( $(this).attr('id') ) == ‐1 ) $('#drop‐
esquerda').append($(this));
38. });
39. // ordena containers
40. var esquerda = ordem[0].split(',');
41. for( i = 0; i< = esquerda.length; i++ ) $('#drop‐
esquerda').append($('#'+esquerda[i]));
42. var direita = ordem[1].split(',');
43. for( i = 0; i<= direita.length; i++ ) $('#drop‐
direita').append($('#'+direita[i]));
44. } else {
45. $.cookie('df_draganddrop', '', { expires: 7, path: '/' });
46. }
47. });
48. // salva cookie
49. var salvaCookie = function() {
50. var ordem = $('#drop‐esquerda').sortable('toArray');
51. ordem += '|' + $('#drop‐direita').sortable('toArray');
52. $.cookie('df_draganddrop', ordem);
53. };

4 de 4 29/09/2009 23:52