1 reply to this topic

[Insert]

Pessoal, estou quebrando a cabeça e nao consigo de jeito algum fazer o que desejo.

Tenho esta lista como exemplo:

<ul id="itens">
<li id="1">Blabla</li>
<li id="2">Bleble</li>
<li id="3">Blibli</li>
</ul>

Queria colocar um botão de UP e DOWN em cada <li> da lista que ao clicar fara o <li> correspondente subir ou descer sem mudar seus atributos.

Como posso fazer isso? Preciso muito de ajuda para fazer isso, ja busquei na net e só acho com jquery mas quero fazer sem usar frameworks pois meu sistema esta tdo sem framework.

Alguem sabe como fazer ?

[Fábio Morato]

Tenta isso(tudo organizado ):

<script type="text/javascript">
var textos = new Array();
textos[1] = "Blabla"; textos[2] = "Bleble"; textos[3] = "Blibli";
function sobe(id){
  var texto1 = textos[id];
  var texto2 = textos[id-1];
  textos[id] = texto2;
  textos[id-1] = texto1;
  document.getElementById(id-1).innerHTML=texto1;
  document.getElementById(id).innerHTML=texto2;
}
</script>
<style type="text/css">
#tudo{
margin: 0 auto;
width: 350px;
}
#box1{
width: 150px;float:left;
}
#box2{
width: 150px; float:right; 
}
</style>
<div id="tudo">
<ul id="itens">
<div id="box1">
<li id="1">Blabla</li>
<li id="2">Bleble</li>
<li id="3">Blibli</li>
</div>  
<div id="box2">
<br />
<a href="javascript:void(0)" onclick="sobe(2)">/\</a>
<br />
<a href="javascript:void(0)" onclick="sobe(3)">/\</a>
</div>
</ul>
</div>

Espero que tenha ajudado!

Edição feita por: Fábio Morato, 24/07/2012, 03:13.