Jquery UI sortable, write order into a MySql database

Question

I'm currently using JQuery UI Dragabble, Droppable and sortable. I have two div sections at top and bottom of my php file were i'm dragging and dropping contents from bottom to top div sections.

In top div section i'm performing Sortable JQUery opertions my next requirment is when i perform sorting operation in top section its order should be automatically updated in my MYSQL DB i gotta stuck like how to pass the sorted order to my MySQL db via ajax and php file. Can somebody suggest some help in Achieving it!

Thanks!

Html/PHP code

<div class="drop_list">
        <ol id="sortable" style="list-style:decimal;"></ol>
    </div>
    <div class="sort_list">
    <ul id="draggable">
        <?php 
            for($i=1;$i<=5;$i++)
            {
            ?>  
                <li data-id='article_<?php echo $i;?>' class="draggable_li qitem" >
                    <div class="main_div">
                        <div class="secondary_div">
                            <div class="form_div">
                                <form>
                                    <input style="width:15px;" type="checkbox" class="hello"/>
                                </form>
                            </div>
                            <label class="item_div">
                                <span class="item">Item = <?php echo $i; ?></span>
                            </label>
                        </div>
                        <button class="hello btn btn-success add_top">
                            Add to Top Stories
                        </button>
                        <span class="AH_section" style="display:none;float:right;">
                            <input type="checkbox"/>Home Section
                            <input type="checkbox"/>App Home Section
                        </span>
                    </div>
                </li>
            <?php
            }
        ?>
    </ul>
    </div>
    </div>
        </div>
    </div>

JQuery code

$(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
            refreshPositions: true ,
            helper : 'clone',
            cursor: "move",
            delay: 1,
            tolerance: 'pointer',
            revert: 50  
            /*stop:function(event,ui){
                var data = $(this).sortable('serialize');
            }*/ 
        }).serialize();

        $("ol li").disableSelection();

        $(".sort_list li").draggable({
            //containment : "#container",
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $(".drop_list ol").droppable({
            revert:true,
            //hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.AH_section').show();
                    //$(ui.draggable).draggable( 'disable' ); //this will not append dragged list at top of the container
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
                    return true;
                }
            }
        });
    });

Answer 1

You can add some id attribute to li, in my case will be get_id. and then call below function onDropSendSort(); when you want, ie after drop.

<li data-id='article_<?php echo $i;?>' get_id="<?php echo $object_id; ?>" class="draggable_li qitem" >

function onDropSendSort() {
  var data = []; 
  $('#draggable li').each(function() {
      var id = $(this).attr('get_id');
      data.push(id);
  });

 // data = [id_1, id_3, id_n];

  $.ajax({  
    url: 'some_url',
    type: 'POST',
    data: {sort: data},
    complete: function(res) {
      console.info(res);
    }
  });
}

Answer 2

change data-id='article_<?php echo $i;?>' to id='<?php echo $i;?>'

add this to your sortable(),

update: function (event, ui) {
         var serial=$(this).sortable('serialize');
             save_sortable(serial);
}

so here on update, you are calling save_sortable() function, from ajax , update your db in the order returned from sortable()

function save_sortable(serial)
{
      $.ajax({
         url: "path to your file to update in db.",
         type: 'POST',
         data: serial,
         success: function (data) {
                  //alert(data);
         }
      });
}