problem with sortable jquery

0

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.

    
asked by anonymous 13.01.2018 / 21:10

0 answers