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

Solución:

La interfaz de usuario de jQuery sortable la característica incluye un serialize método para hacer esto. Realmente es bastante simple. 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 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 el serialize opción, creará una cadena de consulta POST como esta: item[]=1&item[]=2 etc. Entonces, si utiliza, por ejemplo, los ID de su base de datos en el id atributo, 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 también podría ayudar. A) fue diseñado para mantener la carga útil al mínimo mientras se envía 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 descartar) B) Necesitaba enviar una 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 la base de datos del elemento ordenado y la identificación de la base de datos del elemento junto al cual se eliminó. 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="https://foroayuda.es/#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á un AJAX POST solicitud a saveorder.php, pero, por supuesto, siempre puede publicarlo como un formulario normal.

<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é todas las verificaciones y comprobaciones.

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

---

---

Utiliza Nuestro Buscador