jQuery UI Sortable, luego escribe el pedido en una base de datos

Quiero usar la sortablefunción jQuery UI para permitir a los usuarios establecer un orden y luego, en el cambio, escribirlo en la base de datos y actualizarlo. ¿Alguien puede escribir un ejemplo sobre cómo se haría esto?

La función jQuery UI sortableincluye un serializemétodo para hacer esto. Es bastante simple, de verdad. Aquí hay un ejemplo rápido que envía los datos a la URL especificada tan pronto como un elemento cambia de posición.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Lo que esto hace es que crea una matriz de elementos utilizando los elementos id. Entonces, generalmente hago algo como esto:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

Cuando usa la serializeopción, creará una cadena de consulta POST como esta: item[]=1&item[]=2etc. Entonces, si utiliza, por ejemplo, sus ID de base de datos en el idatributo, puede simplemente iterar a través de la matriz POSTed y actualizar las posiciones de los elementos en consecuencia .

Por ejemplo, en PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

Ejemplo en jsFiddle.

Pensé que esto podría ayudar también. A) fue diseñado para mantener la carga útil al mínimo mientras se envía de vuelta al servidor, después de cada tipo. (en lugar de enviar todos los elementos cada vez o iterar a través de muchos elementos que el servidor podría arrojar) B) Necesitaba devolver la identificación personalizada sin comprometer la identificación / nombre del elemento. Este código obtendrá la lista del servidor asp.net y luego, al ordenar, solo se enviarán 2 valores: la identificación de db del elemento ordenado y la identificación de db del elemento al lado del cual se descartó. 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, uso exactamente lo que tengo en mi CMS

Cuando desee almacenar el pedido, simplemente llame al método JavaScript saveOrder(). Hará una POSTsolicitud AJAX para saveorder.php, pero por supuesto, siempre puede 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 verificación y verificació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 atrapar el pedido 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 identificadores después de las acciones de "detener o cambiar". Pero el ejemplo publicado en la página de IU de JQuery funciona bien para mí. Puedes consultar ese enlace aquí.

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

Nota: Tuve que agregar otro campo de base de datos de tipo INT (11) que se actualiza (con fecha y hora) en cada iteración; sirve para que el script sepa qué fila se actualizó recientemente, o de lo contrario terminará con resultados codificados.