jQuery UI Sortable, luego escriba el orden en una base de datos

Pensé que esto también podría ayudar. A) fue diseñado para mantener la carga útil al mínimo mientras se envía de vuelta al servidor, después de cada clasificación. (en lugar de enviar todos los elementos cada vez o iterar a través de muchos elementos que el servidor podría tirar) B) Necesitaba enviar de vuelta id personalizado sin comprometer el id / nombre del elemento. Este código obtendrá la lista de asp.net servidor y luego al ordenar solo se enviarán 2 valores: El id de la base de datos del elemento ordenado y el id de la base de datos del elemento junto a que se cayó. Basado en esos 2 valores, el servidor puede identificar fácilmente la nueva posición.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>

Estás de suerte, utilizo la cosa exacta en mi CMS

Cuando desee almacenar el pedido, simplemente llame al método JavaScript saveOrder(). Hará una solicitud AJAX POST para saveorder.php, pero por supuesto siempre puedes publicarlo como un formulario regular.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

En saveorder.php; Tenga en cuenta que eliminé toda la verificación y comprobación.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Este es mi ejemplo.

Https://github.com/luisnicg/jQuery-Sortable-and-PHP

Necesita capturar el orden en el evento de actualización

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Puedo cambiar las filas siguiendo la respuesta aceptada y el ejemplo asociado en jsFiddle. Pero debido a algunas razones desconocidas, no pude obtener los ID después de las acciones "detener o cambiar". Pero el ejemplo publicado en la página de interfaz de usuario de jQuery funciona bien para mí. Puede comprobar ese enlace aquí.

Pruebe con esta solución: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ donde new order se guarda en algún elemento HMTL. Luego envía el formulario con estos datos a algún script PHP, e iterar a través de él con bucle for.

Nota: Tuve que agregar otro campo db de tipo INT(11) que se actualiza(marca de tiempo) en cada iteración - sirve para que el script sepa qué fila se actualiza recientemente, o de lo contrario terminas con resultados revueltos.