В частности, вам нужно посмотреть, как прикрепить событие к сортируемому
http://jqueryui.com/demos/sortable/#event-update
и сериализацию для получения соответствующего контента http://jqueryui.com/demos/sortable/#method-serialize
EDIT
Это примитивная версия того, что вам нужно сделать.
<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>
Каждому элементу li требуется идентификатор, понятный вашей БД
<li class="ui-state-default" id="el-1">1</li>
«1» в id = «el-1» должно относиться к id в вашей таблице БД. Когда вы переупорядочиваетесь, событие обновления срабатывает, проходит новый порядок, захватывает все идентификаторы и передает их ajax-запросу, который затем может получить php-файл. Затем скрипт order.php разделите числа на «,» и обновите таблицу по одному.
, например
$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 ';
}
}