Preciso inserir blocos de textos e depois ter a liberdade de reordenar eles.
Nas primeiras inserções funciona, depois os divs começam a se perder e o primeiro pula pro último por exemplo, quando na verdade ele deveria apenas descer um div.
Podem copiar o código no editor que ele já funcionará.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moveup / Movedown</title>
<style type="text/css">
div {float:left; width:100%; max-width:900px}
#ConteudoMateria {float:left; width:100%; max-width:900px}
.DivPadrao {float:left; width:100%; font-family:arial; helvetica; font-size:14px; line-height:20px; margin-top:30px}
textarea {width:100%; height:90px; font-family:arial, helvetica; font-size:14px; color:#333; padding:10px; box-sizing: border-box}
input[type="button"] {background-color:#333; font-size:13px; color:#fff; border:0px; height:30px; width:200px}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function MoverBlocoConteudo(){
var selected=0;
var itemlist = $('#ConteudoMateria');
var len=$(itemlist).children().length;
$(".MoveUp").click(function(e){
e.preventDefault();
selected = $(this).parents('.DivPadrao').index();
if(selected>0) {
jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
selected=selected-1;
}
});
$(".MoveDown").click(function(e){
e.preventDefault();
selected = $(this).parents('.DivPadrao').index();
if(selected < len) {
jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
selected=selected+1;
}
});
}
function AddConteudo(){
var texto = $('#texto').val();
$('#texto').val('');
$('#ConteudoMateria').append('<div class="DivPadrao">'+ texto +'<br><a href="#" class="MoveUp">Mover p/ cima</a> | <a href="#" class="MoveDown">Mover p/ baixo</a></div>');
MoverBlocoConteudo();
}
$(document).ready(function(){
MoverBlocoConteudo();
});
</script>
</head>
<body>
<div><textarea id="texto"></textarea><br><br><input type="button" value="Adicionar texto" onclick="AddConteudo()" /></div>
<div id="ConteudoMateria"></div>
</body>
</html>