Mudar ordem de exibição das DIVs

[estudante_php 1]

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!

[0cool 0]

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.

[estudante_php 1]

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!

[0cool 0]

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>

[estudante_php 1]

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.

[0cool 0]

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>

[estudante_php 1]

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é?

[0cool 0]

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>

[estudante_php 1]

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....

[William Bruno 1501]

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.

[estudante_php 1]

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