Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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">](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> margin:0;padding:0;list-style:none;
} display:inline;
} 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>Valeu Junior, você Acertou no Ponto...
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>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">](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> margin:0;padding:0;list-style:none;
} display:inline;
} 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>agora tá que tá xuxu beleza, valeu mesmo