Я написал ответ на этот вопрос 5 лет назад, но этот ответ отстой (и этот вопрос имеет почти 38 000 просмотров), поэтому вот улучшенный ответ.
По существу, три частиэтого вопроса, который вы должны решить.Мы рассмотрим все три.
Реакция на изменения в порядке сортировки (Шаг 1)
Первая проблема, которую нам нужно решить, это реакция на изменения в порядке отсортированных элементов.Если мы посмотрим документацию jQuery UI Sortable Widget , мы увидим, что у нее есть событие change, которое вызывается при изменении порядка сортировки и идеально подходит для наших нужд.
Примечание: в моем исходном ответе вместо события change использовался stop.change лучше (по крайней мере, в этом случае), поскольку он будет сообщать обо всех изменениях в сортировке, независимо от того, было ли изменение интерактивным (пользовательским) или программным, и только в том случае, если порядок действительно изменился.С другой стороны, событие sort вызывается только тогда, когда пользователь прекращает сортировку (отпускает мышь или поднимает палец).
Используя событие sort, мы теперь можем ответить наизменения в сортировке.Следующий код инициализирует для нас виджет Sortable и позволит нам установить функцию, которая будет вызываться при срабатывании sort:
var $sortableList = $("#your-list");
var sortEventHandler = function(event, ui){
console.log("New sort order!");
};
$sortableList.sortable({
stop: sortEventHandler
});
// You can also set the event handler on an already existing Sortable widget this way:
$sortableList.on("sortchange", sortEventHandler);
. После этого мы готовы приступить к работе.на шаге 2:
Извлечение отсортированных элементов (Шаг 2)
Эта часть довольно проста.Нам просто нужно получить массив элементов в нашем отсортированном списке.Для этого мы можем просто запросить дочерние элементы элемента ul (список), используя функцию jQuery children():
var listElements = $sortableList.children();
console.log(listElements); // [ <li>, <li>, ... ]
Отлично, но нам конкретно нужны значения элемента:
var listValues = [];
listElement.forEach(function(element){
listValues.push(element.innerHTML);
});
console.log(listValues); // [ "Item 1", "Item 2", ... ]
Также можно использовать .sortable("toArray") или .serialize().
Отлично!К последнему биту.
Сериализация и отправка нового отсортированного заказа (Шаг 3)
Сериализация - это «процесс преобразования структур данных или состояния объекта в формат, который можно сохранить (например, в файле или в буфере памяти, или передаваться по ссылке сетевого подключения) "(спасибо Википедия !)
То, как вы это сделаете, во многом зависит от ваших конкретных потребностей, поэтому мыЯ просто расскажу о некоторых способах, которыми вы могли бы сделать это с помощью jQuery.
AJAX:
Если мы используем AJAX, мы можем просто отбросить запрос ксервер с новым заказом.jQuery автоматически обработает сериализацию listValues для нас:
$.post("your-server.com/save_order", { "items": listValues } );
Или, если вы предпочитаете JSON:
$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );
Форма
СоздатьФорма:
<form action="your-server.com/save_order" method="POST">
<input name="items" value="" />
</form>
Обновление ввода item:
var serializedValue = $.param(listValues);
$("#ourForm > input").val(JSON.encode(listValues));
Отправка:
$("#ourForm").submit()
Старый ответ:
HTML:
<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>
JavaScript:
$(".selector").sortable({
stop: function(event, ui) {
var data = "";
$("#sortable li").each(function(i, el){
var p = $(el).text().toLowerCase().replace(" ", "_");
data += p+"="+$(el).index()+",";
});
$("form > [name='new_order']").val(data.slice(0, -1));
$("form").submit();
}
});
А в файле save_order.php вы можете проанализировать POST-переменную "new_order" и получить заказы из элементов 1, 2, 3 и т. Д..