Artigos HTML e CSS 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();

console.log(variavel);

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" style="top:100px;">Clique para arrastar</div>
  48      <div id="dragee" style="left:120px;">Clique para arrastar</div>
  49      <div id="dragee" style="top:400px;left:300px;">Clique para arrastar</div>
  50      <div id="dragee" style="top:200px;left:200px;">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