Move div to another div and update database

Question

Move div to another div and update database

Navigation

#1 by (1 votes)

1

I have 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 a div to another div. Working 100%. However, I need to update the database, with the category I pass through this new div. I need to retrieve by jQuery - cod_category and cod_business, and set this business in this new category, which was dragged ...

php jquery-ui

asked by anonymous 25.08.2016 / 15:47

1 answer

Postgress Transaction in NodeJs Insert page break when generating PDF with Snappy PDF in Laravel 5

score 1 · Answer 1

Using jQuery sortable you can add an update attribute and then make changes to 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 just the selected one, will trigger this event.

As an example:

I quote a Post already 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 answer. No change, it adds the class css highlights, which changes the background of the item to the yellow color (being originally gray) and in the update it removes this class (returning the color to the original). With this link you can see the example in practice and understand when each of these events are triggered and understand the best time to update your database, you will also see that the event is triggered for all items.