jQuery UI Drag and Drop

O jQuery UI comporta um conjunto de componentes, efeitos, interações, etc. totalmente feito em JavaScript que possibilita aos desenvolvedores de conteúdo e aplicações front-end ter em mãos recursos poderosos para o desenvolvimento web. Em meio a isso, dois desses mesmos recursos se destacam e fornecem elementos bem interessantes para, em conjunto, gerar aplicações criativas e diferentes: os recursos de Selectable (Selecionável) e Draggable (arrastável).

Através das funções que a linguagem disponibiliza você será capaz de criar efeitos de arrastar e soltar, assim como selecionar vários elementos ao mesmo tempo e ter todo esse poder em mãos para poder turbinar suas páginas web.

Neste artigo veremos alguns exemplos práticos da utilização destes recursos com explanação acerca dos códigos feitos.

Downloads e Instalação

Para configurar o uso do jQuery UI no seu projeto, é necessário discernir primeiro qual dos modelos abaixo de uso você irá seguir:

· Download dos arquivos JS: Através dessa opção você terá à disposição todos os arquivos (ou apenas os dos recursos que quiser usar) de código JavaScript, CSS, imagens, etc. para trabalhar com a biblioteca. Isso te fornece o poder de trabalhar off-line, mas ao mesmo tempo pode tornar a manutenção do código e/ou versões mais complicada;

· Acesso direto via link público: Através dessa opção você poderá trabalhar diretamente com os arquivos mais recentes de código JavaScript para as versões da biblioteca jQuery UI. O acesso é feito via conexão web, logo sua aplicação necessita de uma conexão com a internet para funcionar.

Para quaisquer opção selecionada, você terá de acessar a página de download do jQuery UI. Veja na seção Links onde encontrar o endereço para tal.

Na mesma página de download é possível encontrar a opção de construtor do download: Download Builder. Selecione a versão do jQuery e desmarque todas as opções de componentes, exceto as duas que nos interessam: Draggable e Selectable. Clique no botão Download e espere até o mesmo ser concluído.

Ao trabalhar com essa opção você deverá selecionar os arquivos certos (js e css), adicionando os mesmos imports corretamente à tag “head” do documento HTML. São eles:

a) jquery-xxx.min.js – o core do framework jQuery

b) ui.core.js – o core UI do Javascript

c) ui.draggable.js – Arquivo Javascript para as funções de Draggable

d) ui.selectable.js – Arquivo Javascript para as funções de Selectable

Em contrapartida, para trabalhar com a segunda opção é necessário apenas fazer o import direto dos links dos arquivos (js e css) para a aplicação. Veremos como fazer isso quando chegarmos à parte programática.

O jQuery UI acrescenta classes CSS para diferentes eventos do mouse, por exemplo:

· jQuery UI Draggable

o .ui-draggable – A classe que ele adiciona ao criar o objeto draggable();

o .ui-draggable-dragging – A classe que ele adiciona ao arrastar um objeto ao longo da página.

· jQuery UI Selectable

o .ui-selectee – A classe que ele adiciona ao criar o objeto selectable();

o .ui-selectable – A classe que ele adiciona ao selecionar o objeto;

o .ui-selecting – A classe que ele adiciona ao clicar e iniciar a criação da caixa de seleção em torno dos elementos que você deseja selecionar; Assim que você começar a selecionar, ela se tornará “.ui-selectable”.

Essa é a estrutura básica de como o jQuery UI draggable e selectable gera classes para manipular a mudança para cada ação.

Vamos usar a função “console.log()” para relatar o que o código está fazendo após diferentes etapas ao longo da página. Certifique-se de que você tem o Firebug instalado (se você estiver no Firefox). Se você não sabe o que é console.log(), dê uma olhada na documentação (vide seção Links). Certifique-se de que se você usar esta técnica em um exemplo do mundo real, remova o console.log() para diminuir o tempo de carregamento da página. Esta pequena função nos permite ver o que o nosso código está fazendo. Veja na Listagem 1.

Listagem 1. Exemplo de uso da função log();

Agora que temos o entendimento de como ele funciona com diferentes classes, vamos começar a olhar para o código que o faz funcionar.

Codificando

Vejamos o desenvolvimento de um exemplo básico de drag and drop, onde temos cinco divs que podem ser arrastadas e soltas dentro de uma região pré-estipulada na página. Copie o código contido naListagem 2 para uma página HTML qualquer e execute no browser.

Listagem 2.Código de exemplo para o modelo de dragging e selectable

01 <html lang="en"> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 04 <title>jQuery UI - Selectables e Draggables</title> 05 <!-- Importando arquivos do jQuery e jQuery UI --> 06 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 07 <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 08 <style type="text/css"> 09 /* Cole o código CSS aqui */ 10 </style> 11 <script type="text/javascript"> 12 $(function() { 13 var selecionado = $([]), 14 offset = {top:0, left:0}; 15 16 $("#selectable1").selectable(); 17 18 $("#selectable1 div").draggable({ 19 start: function(ev, ui) { 20 $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected"); 21 22 selecionado = $(".ui-selected").each(function() { 23 var el = $(this); 24 el.data("offset", el.offset()); 25 $(this).text("Objetos \"Selected e dragging\""); 26 }); 27 offset = $(this).offset(); 28 }, 29 drag: function(ev, ui) { 30 var dt = ui.position.top – offset.top, dl = ui.position.left – offset.left; 31 32 selecionado.not(this).each(function() { 33 var el = $(this), off = el.data("offset"); 34 el.css({top: off.top + dt, left: off.left + dl}); 35 }); 36 }, 37 stop: function(ev, ui){ 38 $(this).text("Parou de arrastar"); 39 } 40 }); 41 }); 42 </script> 43 </head> 44 <body> 45 <div id="selectable1"> 46 <div id="dragee" >Clique para arrastar</div> 47 <div id="dragee" >Clique para arrastar</div> 48 <div id="dragee" >Clique para arrastar</div> 49 <div id="dragee" >Clique para arrastar</div> 50 <div id="dragee" >Clique para arrastar</div> 51 </div> 52 </body> 53 </html>

No início da listagem temos a importação dos dois arquivos JavaScript do jQuery e jQuery UI. Observe que as versões dos mesmos devem ser compatíveis tenho a versão da lib UI sempre igual ou maior que a do jQuery. Na linha 9 subtraímos o código CSS para simplificar a listagem, mas antes de testar você deve substituir o CSS da Listagem 3 pelo comentário.

Na linha 13 criamos a variável selecionado como um vetor que guardará todos os objetos HTML que forem adicionados à div de drop. Em seguida, chamamos a função selectable() para definir que seus objetos internos (demais divs) poderão ser selecionados, clicados. Na linha ela 18 criamos a regra jQuery de seleção que define todas as divs filhas como objetos arrastáveis (draggable).

Dentre as funções e propriedades disponíveis nesse objeto, temos:

• start: função que será executada quando o objeto em questão começar a ser arrastado. Na linha 20 verificamos se o objeto é selecionável (via classe CSS “ui-selected” gerada pelo próprio jQuery UI) e, caso positivo, removemos a classe para que uma nova seja adicionada de acordo com as regras da função drag (a seguir). Depois, iteramos sobre cada uma das div’s selecionáveis, recuperamos sua posição na página e imprimimos a mensagem “Objetos Selected e Dragging” dentro da mesma.
• drag: basicamente salva o valor da posição onde o objeto div estava antes de ser arrastado e define a nova posição do memso. Na linha 32 iteramos sobre todos os itens selecionados e configuramos os novos valores das propriedades de posição.
• stop: exibe o texto “Parou de arrastar” na div quando o evento ocorrer.

Listagem 3.Código CSS do exemplo.

#selectable1 { font-size:70%; font-family: Segoe UI, Arial; font-weight: bold; width:600px; height:600px; border:1px solid #999999; margin:0 auto; } #selectable1 .ui-selecting { background: #aad284; border:1px solid #666666; } #selectable1 .ui-selected { background: #e2ecf5; border:1px solid #666666; } #selectable1 div { position: absolute; width: 100px; height: 75px; border: 1px solid #efefef; } #selectable1 .ui-draggable { padding:5px; background-color:#FFF9D8; } #selectable1 .ui-draggable-dragging { background-color:#91B168; font-color:#202020; }

O resultado poderá ser observado na Figura 1. Note que com este modelo é possível arrastar elementos individual e conjuntamente, assim como observar o estado de mudança das mensagens à medida que os elementos forem sendo manipulados.

Figura 1. Tela de exibição do modelo de divs usado

Links

Página de Download - http://jqueryui.com/download/

Página de Arrastáveis - http://api.jqueryui.com/draggable/

Página Selecionáveis - http://api.jqueryui.com/selectable/

Console Firebug - http://getfirebug.com/wiki/index.php/Console_API