Mudar ordem de exibição das DIVs | Fórum iMasters

E

Publicado em 24 de mai.

Mudar ordem de exibição das DIVs

Suponha que eu tenha três divs, uma após a outra:

<div id="1">Conteúdo 001</div>

<div id="2">Conteúdo 002</div>

<div id="3">Conteúdo 003</div>

Queria um código em Javascript ou qualquer outro pra permitir ao usuário alterar a ordem de exibição dessas 3 divs, por favor!

Por exemplo, se selecionar um critério de exibição diferente num <select>, a ordem de exibição mudará.

Valew!

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

0

0cool· 24 de mai.

Tutorial: http://www.daviferreira.com/blog/post/5/interface-drag-and-drop-com-jquery-atualizado.html

Demo: http://www.daviferreira.com/blog/exemplos/draganddrop/novo.html

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Tutorial: http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/

Demo: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

Demo: http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Tutorial: http://sonspring.com/journal/jquery-portlets

Demo: http://host.sonspring.com/portlets/

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Tutorial: http://papermashup.com/drag-drop-with-php-jquery/

Demo: http://papermashup.com/demos/jquery-drag-drop/

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Se quiser pesquisar mais sobre o assunto, procure por drag and drop.

E

estudante_php· 24 de mai.

Cara, valeu pela rápida resposta!

Mas eu quero que essa alteração na ordem seja feita ao se mudar o valor de um <SELECT>

Portanto, não envolve drag and drop!

0

0cool· 24 de mai.

Entendi, exemplo simples, o resto é contigo, só usar a mente.

<select id="escolhas">
 <option value="div1">Div 1</option>
 <option value="div2">Div 2</option>
 <option value="div3">Div 3</option>
</select>

<div id="divs">
 <div id="div1"><p>Div 1 mostrando...</p></div>
 <div id="div2"><p>Div 2 mostrando...</p></div>
 <div id="div3"><p>Div 3 mostrando...</p></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("#escolhas").change(function(){
 $("#" + this.value).show().siblings().hide();
});
$("#escolhas").change();
</script>

E

estudante_php· 24 de mai.

Mais uma vez obrigado!

Só que ainda não era isso o que eu queria. Explico: neste exemplo o select tem que ter apenas dois valores, digamos, CRITÉRIO_1 e CRITÉRIO_2.

Ao selecionar CRITÉRIO_1, exibo Div1, Div2 e Div3.

Ao selecionar CRITÉRIO_2, exibo Div3, Div2 e Div1.

0

0cool· 24 de mai.

Basta utilizar a cabeça, seguindo o exemplo anterior que eu te passei...

<select id="escolhas">
 <option value="c1">CRITÉRIO_1</option>
 <option value="c2">CRITÉRIO_2</option>
</select>

<div id="divs">
 <div id="c1">
 <div id="div1">Div 1</div>
 <div id="div2">Div 2</div>
 <div id="div3">Div 3</div>
 </div>
 <div id="c2">
 <div id="div3">Div 3</div>
 <div id="div2">Div 2</div>
 <div id="div1">Div 1</div>
 </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("#escolhas").change(function(){
 $("#" + this.value).show().siblings().hide();
});
$("#escolhas").change();
</script>

E

estudante_php· 24 de mai.

Er, tem mais uma regrinha que faz toda a diferença. Você está repetindo conteúdo:

<div id="divs">
 <div id="c1">
 <div id="div1">Div 1</div>
 <div id="div2">Div 2</div>
 <div id="div3">Div 3</div>
 </div>
 <div id="c2">
 <div id="div3">Div 3</div>
 <div id="div2">Div 2</div>
 <div id="div1">Div 1</div>
 </div>
</div>

Mas tem que haver apenas uma DIV:

<div id="div">
 <div id="c">
 <div id="div1">Div 1</div>
 <div id="div2">Div 2</div>
 <div id="div3">Div 3</div>
 </div>
</div>

E agora, José?

0

0cool· 24 de mai.

Repetindo conteúdo? esta é uma forma, existe outra que é regatar as divs por ajax, mais faria requisições extras no servidor.

Outra forma eu nunca trabalhei, portanto passo.

Mas pra te ajudar, aqui tem o que esta precisando

http://pobrecomputeiro.wordpress.com/2009/02/17/clonagem-de-divs-invertendo-posicoes-jquery/

Basta estudar e depurar, o segredo esta ai.

:) ;) Boa sorte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
	$(document).ready(function(){
 $('.up').click(function(){
 //Seleciona o DIV que abriga o botão e os outros Objetos a partir do botão
 var $divPai = $(this).parent();
 //Procura por um textarea, caso haja, e então passa o texto do memso para $valueTextArea
 var $valueTextArea = $divPai.find('textarea').val();
 //Procura o Index de Algum Select, assim como no textarea
 var $indexSelect = $divPai.find('select').attr('selectedIndex');
 //Seleciona o Próximo DIV depois do DIV pai, visto que estamos no botão de DOWN
 var $prev = $divPai.prev();
 //Caso exista um "próximo div"
 if ($prev.length) {
 //O DIV pai cria um clone de sí mesmo e insere antes o valor de $prev
 $divPai.clone(true).each(function(){
 //Neste momento os valores de textarea e select são utilizados
 //Fazemos esta configuração de valores apenas com textarea e select, pois com os outros objetos o jquery
 //faz isto automaticamente. Dizem ser um BUG do JQUERY, não fazelo com os textarea e select.
 if($valueTextArea){
 //Procura algum textarea existente dentro do DIV clonado e insere os valores captados
 $('textarea', this).val($valueTextArea);
 } else if($indexSelect){
 //Procura algum select existente dentro do DIV clonado e insere os valores captados
 $('select', this).attr('selectedIndex', $indexSelect);
 }
 $(this).insertBefore($prev);
 });
 //Remove o DIV pai Antigo
 $divPai.remove();
 }
 });

 $('.down').click(function(){
 //Seleciona o DIV que abriga o botão e os outros Objetos a partir do botão
 var $divPai = $(this).parent();
 //Procura por um textarea, caso haja, e então passa o texto do memso para $valueTextArea
 var $valueTextArea = $divPai.find('textarea').val();
 //Procura o Index de Algum Select, assim como no textarea
 var $indexSelect = $divPai.find('select').attr('selectedIndex');
 //Seleciona o Próximo DIV depois do DIV pai, visto que estamos no botão de DOWN
 var $next = $divPai.next();
 //Caso exista um "próximo div"
 if ($next.length) {
 //O DIV pai cria um clone de sí mesmo e insere após o valor de $next
 $divPai.clone(true).each(function(){
 //Neste momento os valores de textarea e select são utilizados
 //Fazemos esta configuração de valores apenas com textarea e select, pois com os outros objetos o jquery
 //faz isto automaticamente. Dizem ser um BUG do JQUERY, não fazelo com os textarea e select.
 if($valueTextArea){
 //Procura algum textarea existente dentro do DIV clonado e insere os valores captados
 $('textarea', this).val($valueTextArea);
 } else if($indexSelect){
 //Procura algum select existente dentro do DIV clonado e insere os valores captados
 $('select', this).attr('selectedIndex', $indexSelect);
 }
 $(this).insertAfter($next);
 });
 //Remove o DIV pai Antigo
 $divPai.remove();
 }
 });
	});
</script>
<style>
	.box{width:500px;height:auto;text-align:center}
	.vermelho{background-color:red}
	.cinza{background-color:silver}
	.verde{background-color:green}
</style>
</head>
<body>
<div id="main">
<div class="box vermelho">
	Vermelho<br><input type='button' class='up' value='up'><input type='button' class='down' value='down'><br>
	<input type='text'>
	<select>
 <option>Um</option>
 <option>Dois</option>
	</select>
</div>
<div class="box cinza">
	Cinza<br><input type='button' class='up' value='up'><input type='button' class='down' value='down'><br>
	<textarea></textarea><br>
	<input type='radio' name='radio'>Um</input>
	<input type='radio' name='radio'>Dois</input>
	<input type='radio' name='radio'>Tres</input>
</div>
<div class="box verde">
	Verde<br><input type='button' class='up' value='up'><input type='button' class='down' value='down'><br>
	<input type='checkbox'>Um</input>
	<input type='checkbox'>Dois</input>
	<input type='checkbox'>Tres</input>
</div>
</div>
</body>
</html>

E

estudante_php· 24 de mai.

Quando eu digo "repetindo conteúdo", é o que está dentro das divs que no final das contas será igual...E não posso repetir conteúdo de forma alguma....

W

William Bruno· 24 de mai.

>
Alguma idéia? :)

@estudante_php, não faça POST UP, essa prática vai contra as regras do fórum.

http://forum.imasters.com.br/index.php?app=core&module=help

Que tal enquanto espera que te ajudem, você ajudar alguém também ?

é simples fazer oque você quer, apesar de você ter demorado para explicar.

Consiga um array com os itens que você precisa 'mudar de ordem'.

No evento onchange do select, faça um array_reverse() [procure por alguma implementação, pois acredito que não exista essa função nativa, porém o algoritmo para inverter é simples], que reescreva o conteudo da tua DIV, caso o valor selecionado seja 'tal. Apenas isso.

E

estudante_php· 24 de mai.

Primeiro, desculpe-me pelo postup

Minha explicação foi a mais clara e direta possível...Demorei a explicar porque demoraram a entender, na boa.

Valew pela dica...Vou procurar