Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

Ajuda com JQuery ou Ajax

SuellenOl

Por SuellenOl
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por Mog.Lucas,

Posts recomendados

SuellenOl
 

SuellenOl

Postado
Postado

Bom dia!

Preciso de uma ajuda com JQuery ou Ajax, não sei bem..

Não entendo quase nada dessas linguagens mas preciso fazer uma div grande com várias divs pequenas dentro dela, onde essas divs pequenas podem ser arrastadas para mudar a ordem.

Exemplo bem tosco em anexo..

Agradeço muito a ajuda!

post-714660-0-97465400-1410270535.png

Link para o comentário
Compartilhar em outros sites
  • Membro VIP
Mog.Lucas
 

Mog.Lucas

Postado
  • Membro VIP
Postado

No caso acredito que precise do jQuery, pois o Ajax serve para realizar novas requisições HTTP.. você utilizaria Ajax se precisasse carregar mais divs dinamicamente (sem sair da pagina)..

 

Para facilitar, recomendo usar alguma biblioteca pronta como o jQueryUI, que já tem função para isso.

 

http://jqueryui.com/draggable/

Clica em "view source" para ver o código..

 

No caso depois de carregar o jQueryUI seria algo simples como:

$('#container').draggable();
  • Curtir 1
Link para o comentário
Compartilhar em outros sites
SuellenOl
 

SuellenOl

Postado
  • Autor
Postado

Fiz o seguinte código:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI Draggable - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  <link rel="stylesheet" href="/resources/demos/style.css">  <style>  #ti { width: 130px; height: 20px; padding: 0.5em; }  #rh { width: 130px; height: 20px; padding: 0.5em; }  #adm { width: 130px; height: 20px; padding: 0.5em; }  #cmoda { width: 130px; height: 20px; padding: 0.5em; }  #tudo{width: 570px; height: 350px; border:solid 1px;}  #conteudo{width: 550px; height: 158px; border:solid 1px; margin-top: 50px;}  .posicao{width: 170px; height: 30px; padding: 0.5em; border:solid 1px; color: '#c0c0c0'; float: left;}  .letra{font-size: 11px; margin-top: 0px;}  </style>  <script>  $(function() {    $( "#ti" ).draggable();    $( "#rh" ).draggable();    $( "#adm" ).draggable();    $( "#cmoda" ).draggable();  });  </script></head><body><div id='tudo'><div class='posicao'><span class='letra'>1°</span></div><div class='posicao'><span class='letra'>2°</span></div><div class='posicao'><span class='letra'>3°</span></div><div class='posicao'><span class='letra'>4°</span></div><div class='posicao'><span class='letra'>5°</span></div><div class='posicao'><span class='letra'>6°</span></div><div class='posicao'><span class='letra'>7°</span></div><div class='posicao'><span class='letra'>8°</span></div><div class='posicao'><span class='letra'>9°</span></div><div class='posicao'><span class='letra'>10°</span></div><div class='posicao'><span class='letra'>11°</span></div><div class='posicao'><span class='letra'>12°</span></div><div class='posicao'><span class='letra'>13°</span></div><div class='posicao'><span class='letra'>14°</span></div><div class='posicao'><span class='letra'>15°</span></div><div class='posicao'><span class='letra'>16°</span></div><div class='posicao'><span class='letra'>17°</span></div><div class='posicao'><span class='letra'>18°</span></div><div class='posicao'><span class='letra'>19°</span></div></div><!-- fecha a div tudo --><br/><br/><br/><button>Enviar</button><div id='conteudo'><div id="ti" class="ui-widget-content">  <span>TI - Informática</span></div><div id="rh" class="ui-widget-content">  <span>Recursos Humanos</span></div><div id="adm" class="ui-widget-content">  <span>Administração</span></div><div id="cmoda" class="ui-widget-content">  <span>Compras Moda</span></div></div><!-- fecha a div conteudo --> </body></html>

Está funcionando para o que eu precisava, que era arrastar as divs menores e ordená-las na outra div.

Porém, preciso fazer alguma função que quando eu clicar no botão 'Enviar', eu consiga pegar a ordem que o usuário ordenou os setores, mas não faço a menor ideia de como fazer isso :/

Link para o comentário
Compartilhar em outros sites
  • Membro VIP
Mog.Lucas
 

Mog.Lucas

Postado
  • Membro VIP
Postado

Parece que você precisa utilizar o Sortable ao invés do Draggable.

 

Veja:

http://jqueryui.com/sortable/
 

Existem várias opções para detectar qual a ordem das divs final.. mas você pode usar uma função própria nativa do Sortable:
 

var idsEmOrdem = $('#container').sortable('toArray');console.log(idsEmOrdem);

Existe ainda uma opção de mixar as duas (veja no link do Draggable o exemplo "Draggable + Sortable"
 

Link para o comentário
Compartilhar em outros sites
SuellenOl
 

SuellenOl

Postado
  • Autor
Postado

Nossa, perfeito!

Como realmente não entendo muito, podes me explicar mais sobre como pego a ordenação das divs?

Coloco esse trecho:

var idsEmOrdem = $('#container').sortable('toArray');console.log(idsEmOrdem);

em uma função quando o usuário clicar em um button para enviar a ordenação?

Confesso que não entendi muito bem ainda como pego esses dados.


Meu código :)

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI Sortable - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>    <style>  #sortable { list-style-type: none; margin: 0; padding: 0; width: 31%; }  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.0em; height: 14px; }  #sortable li span { position: absolute; ; }  </style>  <script>  $(function() {    $( "#sortable" ).sortable();    $( "#sortable" ).disableSelection();  });  var idsEmOrdem = $('#container').sortable('toArray');  console.log(idsEmOrdem);  </script></head><body> <ul id="sortable">  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Auditoria e Segurança</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>SSC- Assistência Técnica</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CD 01 - Depósito de Móveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CD 02 - Depósito de Moda</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Moda</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contábil</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contas a pagar/receber (Cobrança, Crediário e Financeiro)</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CRM Marketing</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Eletromóveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Tecnomóveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engenharia/Obras</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Jurídico Trabalhista</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>New Free</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Publicidade</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Recursos Humanos</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Supervisão</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>TI- Informática</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Administrativo</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Controladoria Móveis</li></ul> </body></html>
Link para o comentário
Compartilhar em outros sites
  • Membro VIP
Mog.Lucas
 

Mog.Lucas

Postado
  • Membro VIP
Postado

Bom.. imagino que você não deva estar utilizando ajax, então eu faria algo assim:

1. Passo:
Crie um input hidden no seu formulário que vai receber o valor do sortable('toArray') para enviar ao script destino.

<form id="formulario"><input type="hidden" name="ordemDivs" id="ordemDivs" value="" /></form>

2. Passo:
Vamos bindar uma função ao evento submit do form, assim, logo antes dele ser enviado nós pegaremos o valor (idsEmOrdem) e jogar para o input hidden, que transferirá o valor ao script destino.

<script type="text/javascript">$(document).ready(function(){    $('#formulario').on('submit', function(){        var ordemDivs = $('#container').sortable('toArray');        $('#ordemDivs').val(ordemDivs);    });});</script>

Fiz o código aqui no bloco de notas sem testar mas se você entender a lógica acho que consegue fazer! ;)

Edit: Vish, como o sortable('toArray') deve retornar uma array, você provavelmente vai precisar usar .val(ordemDivs.toString());

Link para o comentário
Compartilhar em outros sites
SuellenOl
 

SuellenOl

Postado
  • Autor
Postado

Entendi em tese a lógica.

O que eu fiz e não deu certo:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI Sortable - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>    <style>  #sortable { list-style-type: none; margin: 0; padding: 0; width: 31%; }  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.0em; height: 14px; }  #sortable li span { position: absolute; ; }  </style>  <script>  $(function() {    $( "#sortable" ).sortable();    $( "#sortable" ).disableSelection();  }); $(document).ready(function(){    $('#formulario').on('submit', function(){        var ordemDivs = $('#container').sortable('toArray');        $('#ordemDivs').val(ordemDivs);        $('#ordemDivs').val(ordemDivs.toString());         alert(ordemDivs);    });});</script></head><body> <ul id="sortable">  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Auditoria e Segurança</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>SSC- Assistência Técnica</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CD 01 - Depósito de Móveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CD 02 - Depósito de Moda</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Moda</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contábil</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contas a pagar/receber (Cobrança, Crediário e Financeiro)</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CRM Marketing</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Eletromóveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Compras Tecnomóveis</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engenharia/Obras</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Jurídico Trabalhista</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>New Free</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Publicidade</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Recursos Humanos</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Supervisão</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>TI- Informática</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Administrativo</li>  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Controladoria Móveis</li></ul> <form id="formulario"><input type="hidden" name="ordemDivs" id="ordemDivs" value="" /><input type="submit" name="submit" value="Confirmar"/></form></body></html>

Tenho uma grande dificuldade em entender como vou conseguir pegar esses valores ordenados..

1° ponto: O form está no lugar correto? Não entendi se ele deve agrupar toda lista ou não.

2° ponto: Isso:

 $(document).ready(function(){   $('#formulario').on('submit', function(){     var ordemDivs = $('#container').sortable('toArray');     $('#ordemDivs').val(ordemDivs);     $('#ordemDivs').val(ordemDivs.toString());     alert(ordemDivs);   });});

Está no lugar correto?

Coloquei aquele alert ali para tentar enxergar o retorno do array mas não fui feliz, como já podia imaginar.

Link para o comentário
Compartilhar em outros sites
  • Membro VIP
  • Solução
Mog.Lucas
 

Mog.Lucas

Postado
  • Membro VIP
  • Solução
Postado

Desculpe falar isso, mas não tem a ver com inteligência e sim preguiça. Absolutamente NUNCA copie códigos prontos, cole, e reze para funcionar.. quando copiar códigos, entenda-os e altere-os mesmo que um mínimo (alterar as variaveis, por ex) pois isso te fará ter domínio do código que está utilizando. SEMPRE faça códigos identados, mesmo que sejam códigos de teste (ou idente códigos prontos).

Nosso mercado já é repleto de programadores copia-e-cola.. não seja mais uma..

-----

Clique aqui: http://jsfiddle.net/9eugnnsp/

Sobre seu código tem alguns pontos:
1. O formulário NESSE CASO não precisa ser pai dos elementos pois você pegará os valores deles e jogará para o input hidden de qualquer maneira. Se for pensar num mundo "perfeito", eles deveriam estar dentro do form sim.. uma vez que eles "fazem parte" do form..
2. Até é possível (e fiz sem) fazer o que você precisa sem ajax.. mas em um "mundo perfeito" não deveria nem ser cogitada a opção de fazer o que você quer sem ajax.. então recomendo que dê uma lida sobre isso (é bem simples) pois o código ficaria muito melhor usando ajax.
3. O sortable('toArray') irá serializar os elementos do container (no seu caso, a div id=sortable) pelo id.. no seu caso você não definiu nenhum ID então ele não iria serializar nada.. observe os id="X" que eu coloquei nas tags <li>. Cada um desses id's fazem referencia a um tema/curso.. no seu server-side (script que receberá os dados do post) você precisará tratar cada um desses id's. Você poderia colocar id="Contabilidade" mas não recomendo utilizar texto para esse tipo de coisa.

No server side, você precisará fazer algo como:

$ordem = explode(",", $_POST['ordemDivs']);print_r($ordem); // debuga pra você

E aí a variavel $ordem será uma array na ordem do POST..

Abraços!

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novas respostas.
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...