Move div to another div and update database

Question

I own the following jQuery

$(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6").sortable({
        connectWith: ".connectedSortable",
        receive: function( event, ui ){
            jQuery("#carregando").html('<div class="text-center"><span class="fa fa-spin fa-spinner"></span> carregando..</div>').delay(2000).fadeOut("slow");
            setTimeout(function(){

                $.ajax({
                    url: '<? echo base_url("vendas/pipeline/ajax"); ?>',
                   success: function(data) {
                        $('.pipeline').html(data);
                   }
                });             
            }, 2000);           
        },
    }).disableSelection();
});

And the following HTML with PHP

    <div class="pipeline" id="pipeline">
        <? $i=1; foreach($lista_negocios_dashboard as $valor){ ?>
        <div class="col-md-2 pipeline-base connectedSortable" id="sortable<?=$i;?>">
            <div class="pipeline-categoria text-right">
                <? echo $valor->set_setor; ?>
            </div>
            <? foreach($valor->negocios as $negocios){ ?>
            <div class="pipeline-negocio">
                <h5><a href="<? echo base_url()."vendas/pipeline/negocios/editar/".$negocios->neg_cod; ?>"><? echo $negocios->neg_nome; ?></a></h5>
                <p><? echo $negocios->neg_descricao; ?></p>
            </div>
            <? } ?>
        </div>
        <? $i++;} ?>
    </div>

In this, I can move one div to another div. Running 100%. However, I need to update the database, with the category I go through this new div. I need to recover by jQuery - cod_categoria and cod_negocio, and set this business in this new category, which was dragged...

Answer 1

Using Jquery sortable you can add an update attribute and from there make the changes in the database.

$("#foo").sortable({
    update: function(event, ui){
        // a posição do item reposicionado
        var indice = ui.item.index();
    }
});

The CHANGE attribute is called for any change and an item, since the UPDATE attribute is called only at the end of the last change made. Remember that all items that have been changed, not only the selected, will trigger this event.

As an example:

I quote a Post existing here in the stack with the following example:

$(function() {
$('#sortable').sortable({
    start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
    change: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        var index = ui.placeholder.index();
        if (start_pos < index) {
            $('#sortable li:nth-child(' + index + ')').addClass('highlights');
        } else {
            $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
        }
    },
    update: function(event, ui) {
        $('#sortable li').removeClass('highlights');
    }
});

});

In the example it uses two attributes, change and update, as I mentioned in my reply. In change, it adds the Highlights css class, which changes the background of the item to the yellow color (originally gray) and in update it removes this class (returning the color to the original). With this link you can see example in practice and understand when each of these events are triggered and understand what is the best time to update your database, you will also see that the event is triggered for all items.