0

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>&nbsp;&nbsp;|&nbsp;&nbsp;<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>

1 Resposta 1

1

O primeiro problema que tens no teu código é que estás a re-adicionar o on-click event de todos os "moveUp" e "moveDown" cada vez que adicionas qualquer coisa; Isto faz com que, cada vez que cliques num dos botões - este dispare N vezes.

Para resolver este problema, podes usar o event delegation: Em vez de adicionares o on-click a cada nova criação dos botões cima/baixo faz-lo na inicialização.

sendo que ambos os métodos fazem o mesmo, podes também passar esses para uma função à parte que leve alguns argumentos - nomeadamente o index do elemento e se é para ir para cima ou para baixo:

$(document).ready(function() {
  $("#ConteudoMateria").on('click', '.MoveUp, .MoveDown', function(e) {
    e.preventDefault();
    var index = $(this).parents('.DivPadrao').index();
    var isMoveUp = $(this).hasClass('MoveUp');
    MoverBlocoConteudo(index, isMoveUp)
  });
});

depois disso, reescrevemos o método MoverBlocoConteudo para refletir as nossas mudanças:

function MoverBlocoConteudo(index, moveUp) {
  var itemlist = $('#ConteudoMateria');
  var len = $(itemlist).children().length;

  var thisElement = jQuery($(itemlist).children().eq(index));
  var nextPosition = (moveUp) ? index - 1 : index + 1;

  if (moveUp) {
    jQuery($(itemlist).children().eq(nextPosition)).before(thisElement);
  } else if (!moveUp) {
    jQuery($(itemlist).children().eq(nextPosition)).after(thisElement);
  }
}

O método foi mudado para evitar a repetição e melhorar a condição: Mexe-se para cima quando o argumento moveUp é verdade e vai-se para baixo quando moveUp é falso. Este argumento vem da existencia (ou falta) da class .MoveUp no element clicado.

No método AdicionarConteudo remove-se a chamada ao MoverBlocoConteudo e fica feito.

exemplo no JSFiddle

1
  • Perfeito, funcionou corretamente. Muito obrigado. Commented 24/01/2017 às 10:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .