jQuery UI Сортируемый, а затем записать порядок в базе данных

Думал, что это тоже поможет. A) он был разработан, чтобы сохранить полезную нагрузку до минимума при отправке обратно на сервер после каждого вида. (вместо того, чтобы посылать все элементы каждый раз или повторять через многие элементы, которые сервер может вырезать). B) Мне нужно было отправить обратно пользовательский идентификатор без ущерба для id/name элемента. Этот код получит список из сервера asp.net, а затем при сортировке будет отправлено только 2 значения: идентификатор db отсортированного элемента и идентификатор db элемента, рядом с которым он был удален. Основываясь на этих двух значениях, сервер может легко идентифицировать новое положение.

<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>

Вам повезло, я использую точную вещь в своей CMS

Если вы хотите сохранить заказ, просто вызовите метод JavaScript saveOrder(). Он выполнит запрос AJAX POST для saveorder.php, но, конечно, вы всегда можете публиковать его как обычную форму.

<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 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();'/>

В saveorder.php; Имейте в виду, что я удалил всю проверку и проверку.

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

Это мой пример.

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

Вам нужно уловить порядок в событии обновления

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

Попробуйте с помощью этого решения: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ где новый порядок сохраняется в некотором элементе HMTL. Затем вы отправляете форму с этими данными на некоторый PHP скрипт, и итерации через него для цикла.

Примечание. Мне пришлось добавить еще одно поле db типа INT (11), которое обновляется (timestamp'ed) на каждой итерации - оно служит для script, чтобы узнать, какая строка обновлена ​​недавно, иначе вы закончите с скремблированные результаты.

Я могу изменить строки, выполнив принятый ответ и связанный с ним пример jsFiddle. Но по неизвестным причинам я не смог получить идентификаторы после действий "остановить или изменить". Но пример, опубликованный на странице пользовательского интерфейса JQuery, отлично подходит для меня. Вы можете проверить эту ссылку здесь.