Personal I have a page that has two objects that I want to use sortable, one works but the other does not. Why?
$( ".topic_itens" ).sortable({
cursor: 'move',
revert: true,
handle: '.move_item',
items: '.topic_item',
containment: ".topic_itens",
opacity: 0.6,
start: function(e, ui){
},
stop: function(e,ui) {
var itensReordenados = reordenarItens($(ui.item).attr("data-card"));
//Enviando para o bd a novar ordem dos itens
$.ajax({
type: 'POST',
url: 'funcoes_op.php',
data: {op: "reordenar_topic_itens", token: token, itens: itensReordenados},
dataType: 'json',
beforeSend: function () {
//Loader
$("#topicos").prepend("<img src='img/ajax-loader.gif' class='carregando'=>");
},
success: function(){
$(".carregando").remove();
}
});
}
});
$( "#topicos" ).sortable({
cursor: 'move',
revert: true,
handle: '.move_topico',
items: '.topico',
containment: "#topicos",
opacity: 0.6,
start: function(e, ui){
},
stop: function(e,ui) {
//Reordenando topicos
var topicosReordenados = reordenarTopicos();
//Enviando para o bd a novar ordem dos tópicos
$.ajax({
type: 'POST',
url: 'funcoes_op.php',
data: {op: "reordenar_topicos", token: token, topicos: topicosReordenados},
dataType: 'json',
beforeSend: function () {
//Loader
$("#topicos").prepend("<img src='img/ajax-loader.gif' class='carregando'=>");
},
success: function(){
$(".carregando").remove();
}
});
}
});
The structure in html looks something like this:
<div id="topicos">
<div class="topico">
<div class="topic_itens">
<div class="topic_item"></div>
<div class="topic_item"></div>
<div class="topic_item"></div>
</div>
</div>
<div class="topico">
<div class="topic_itens">
<div class="topic_item"></div>
<div class="topic_item"></div>
<div class="topic_item"></div>
</div>
</div>
</div>
This way the topics work sortable, but the items within each topic does not work. I have summarized the html a lot because it is very large.