jQuery Sortable Grid into MySQL Database PHP

In particular you need to look at attaching an event to the sortable

http://jqueryui.com/demos/sortable/#event-update

and serialize for getting the relevant content http://jqueryui.com/demos/sortable/#method-serialize

EDIT

This is a primitive version of what you need to do.

<script>
$(function() {

    var arrayOfIds = [];

    $( "#sortable" ).sortable({

          update: function(event, ui) { 
            $.each($(this).sortable('toArray'), function(key, value) {
                arrayOfIds.push(value.replace('el-',''))
            });

            var jqxhr = $.ajax({ 
                url: "order.php?order="+encodeURIComponent(arrayOfIds),

            })
            .success(function(response) { console.log("success"  + response ); })
            .error(function() {  console.log("error"); })
            .complete(function() {  console.log("complete "); });

          }

    });
    $( "#sortable" ).disableSelection();
});
</script>

Each li element than needs an id that your DB can understand

<li class="ui-state-default" id="el-1">1</li>

the "1" in id="el-1" should relate to an id in your DB table. When you reorder, the update event fires, goes through the new order, grabs all the ids and passes that to an ajax request which a php file then can pick up. the order.php script then go split the numbers by the "," and update your table one by one.

e.g.

$itemOrders = explode(',',$_POST['order']);

$sizeOfList = sizeof($itemOrders);for($i=0; $i<$sizeOfList; $i++)
{
    $itemId = intval($itemOrders[$i]); 

    $query = "UPDATE your_table_name SET order_no = '".$i."' WHERE id = '".$itemId."' ";
    if ($result = $msHandle->query($query))
    {
        $message = 'success';
    }
        else
    {
        $message =   'fail ';

    }
}