Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leonardo Machado Moreira

[Resolvido] Inverter Ordem das DIVS e seus Conteudos

Por , em Javascript

Recommended Posts

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

Fala Pessoal, preciso mais de uma idéia de como fazem, vejam:

 

Eu tenho uma DIV...

 

Dentro desta DIV existem outras divs uma em baixo da outra, e dentro destas divs o conteudo delas com mais duas setas para cima e para baixo.

 

Oque quero é que quando o usuário clicar na seta para cima de determinada div, ela suba de posição e a div que estava acima dela vá para a posição dela.

 

Tudo precisa se manter como está, as divs apenas devem interter de lugar.

 

Nao sei se fui claro..

 

Alguem tem idédia de como fazer isso

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado 

<script type="text/javascript">

function trocar(e) {

if (e == "subir") {

var div1 = document.getElementById("sub1").innerHTML;

document.getElementById("sub1").innerHTML = document.getElementById("sub2").innerHTML;

document.getElementById("sub2").innerHTML = document.getElementById("sub3").innerHTML;

document.getElementById("sub3").innerHTML = div1;

}

if (e == "descer") {

var div3 = document.getElementById("sub3").innerHTML;

document.getElementById("sub3").innerHTML = document.getElementById("sub2").innerHTML;

document.getElementById("sub2").innerHTML = document.getElementById("sub1").innerHTML;

document.getElementById("sub1").innerHTML = div3;

}

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JunioR-CWB    0

JunioR-CWB
Postado

Exemplo prático com jQuery.

 

Tenho um post com tabelas no meu blog, vale apena dar uma lida.

 

<!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>:: jQuery ::</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.3.1.min.js"></script> 
</head> 
<script> 
$(document).ready(function(){
	$(document.getElementsByTagName('button')).bind('click',function(){
		var $self = $(this);
		var $divPai = $self.parent().parent().parent(); 
		var text = $self.text();
 
		switch(text) {
			case 'up':
				var $prev = $divPai.prev();
				if ($prev.length) {
					$divPai.clone(true).insertBefore($prev);
					$divPai.remove();
				}
			break;
			case 'down':
				var $next = $divPai.next();
				if ($next.length) {
					$divPai.clone(true).insertAfter($next);
					$divPai.remove();
				}
 
			break;
		};
 
	});
});
</script> 
<style> 
ul {
	margin:0;padding:0;list-style:none;
}
ul li {
	display:inline;
}
button {
	font:11px tahoma;
}
#main {
	width:600px;
	margin: 0 auto;
	border: 1px solid #555;
	padding: 5px
}
.content {
	color:#000;
	font-weight: bold;
	margin-bottom:3px;
	padding:4px
}
.vermelho {
	color:#fff;
	background-color: #5B1111
}
.cinza {
	background-color: #ccc
}
.verde {
	color:#fff;
	background-color: #037285
}
</style> 
<body> 
<div id="main"> 
	<div class="content vermelho"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	<div class="content cinza"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	<div class="content verde"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	</div> 
</body> 
</html>

Lembrando que isto fica dinâmico

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Machado Moreira    0

Leonardo Machado Moreira
Postado

só um problemiinha junior.

 

eu peguei seu exemplo e inseri caixas de texto dentro das divs e funcionou legal, assim como funciona para outros elementos, porém inseri textareas e aí deu pau, ou melhor, as textareas passam de uma div para outra, mas o valor delas não,, você tem alguam idéia

 

<div id="main">
	<div class="content vermelho">
		<ul>
			<li>Conteúdo do elemento</li>
		<textarea></textarea>
			<li><button>up</button> <button>down</button></li>
		</ul>
	</div>
	<div class="content cinza">
		<ul>
			<li>Conteúdo do elemento</li>
		<textarea></textarea>
			<li><button>up</button> <button>down</button></li>
		</ul>
	</div>
	<div class="content verde">
		<ul>
			<li>Conteúdo do elemento</li>
		<textarea></textarea>
			<li><button>up</button> <button>down</button></li>
		</ul>
	</div>
	</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JunioR-CWB    0

JunioR-CWB
Postado

Para valores default ele funciona. O problema era na mundança do valor, por exemplo, outro texto no textarea.

 

Veja como ficou:

<!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>:: jQuery ::</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.3.1.min.js"></script> 
</head> 
<script> 
$(document).ready(function(){
	$(document.getElementsByTagName('button')).bind('click',function(){
		var $self = $(this);
		var $divPai = $self.parent().parent().parent();
		var $textArea = $self.parent().prev().find(':textarea');
		var $valueTextArea = $textArea.val();
		var text = $self.text();
		switch(text) {
			case 'up':
				var $prev = $divPai.prev();
				if ($prev.length) {
					$divPai.clone(true).each(function(){
						$('ul > li > :textarea',this).val($valueTextArea);
						$(this).insertBefore($prev);
					});
					$divPai.remove();
				}
			break;
			case 'down':
				var $next = $divPai.next();
				if ($next.length) {
					$divPai.clone(true).each(function(){
						$('ul > li > :textarea',this).val($valueTextArea);
						$(this).insertAfter($next);
					});
 
					$divPai.remove();
				}
 
			break;
		};
 
	});
});
</script> 
<style> 
ul {
	margin:0;padding:0;list-style:none;
}
ul li {
	display:inline;
}
button {
	font:11px tahoma;
}
#main {
	width:600px;
	margin: 0 auto;
	border: 1px solid #555;
	padding: 5px
}
.content {
	color:#000;
	font-weight: bold;
	margin-bottom:3px;
	padding:4px
}
.vermelho {
	color:#fff;
	background-color: #5B1111
}
.cinza {
	background-color: #ccc
}
.verde {
	color:#fff;
	background-color: #037285
}
</style> 
<body> 
<div id="main"> 
	<div class="content vermelho"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><textarea>testes 1</textarea></li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	<div class="content cinza"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><textarea>testes 2</textarea></li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	<div class="content verde"> 
		<ul> 
			<li>Conteúdo do elemento</li> 
			<li><textarea>testes 3</textarea></li> 
			<li><button>up</button> <button>down</button></li> 
		</ul> 
	</div> 
	</div> 
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito