Позвольте мне объяснить мою ситуацию: у меня есть 3 позиции, где изображения могут быть удержаны. Им не нужно заполнять все.
Пустой div | Img 1 | Img 2
Когда я меняю Img 1 на второе место, это будет:
Пустой div | Img 2 | Img 1
Сортировка прекрасно работает с этим. Но я хочу сохранить это в базе данных. Пустой div не имеет идентификатора или данных, которые я хочу использовать. Я хочу использовать данные Img. Таким образом, Img имеет атрибут data-imgId или что-то, что я хочу передать в массиве с Javascript.
Я хочу, чтобы в моем массиве были добавлены "Текущая позиция" и "Данные-imgId". Что-то вроде этого:
Array
(
[230] = 2
[120] = 1
)
230 и 120 являются imageId, а 2 и 1 - sortId. Теперь я просто могу обновить свою базу данных с предложением where на imageId, а затем установить sortId на хороший сорт.
С помощью следующего кода я могу проверить элемент, который был перемещен, но "автоматически" перемещено другое изображение не возвращается. Как я могу это исправить:
$( "#pages" ).sortable({
helper: "clone",
update: function(event, ui) {
console.log($(ui.item).attr("id"));
console.log($(ui.item).index() + 1);
}
});
Этот код возвращает id и позицию перетаскиваемого объекта. Но я также хочу получить другой идентификатор автоматически перемещенного изображения и новую позицию, чтобы я мог использовать это для моей базы данных?
Вместо этого используйте sort(event, ui)
который даст вам дополнительную информацию, такую как новые и оригинальные позиции отсортированного элемента. Затем вы можете выполнить итерацию по вашему массиву, переназначив индексы позиций на основе этих значений.
http://api.jqueryui.com/sortable/#event-sort
ОБНОВИТЬ
Извинения, похоже, что API больше не включает индексы до и после. Вместо этого вы можете использовать как start(event, ui)
и stop(event, ui)
, а также записывать до и после индексов самостоятельно, используя $(ui.item).index()
. После того, как вы это знаете, вы можете перебрать исходный массив, отсортировать по позиции индекса и соответственно обновить индексы.
ОБНОВЛЕНИЕ 2
Попробуй это:
$("#pages").sortable({
stop: function(event, ui) {
$("#pages > img").each(function(i, item) {
var id = $(this).attr("id");
array[id] = i;
});
});
});
ОБНОВЛЕНИЕ 3
Следующая ревизия обслуживает несколько элементов, инициализированных sort
классов.
var array = { One : {}, Two: {} };
$(".sort").sortable({
stop: function(event, ui) {
var id = $(this).attr("id");
$(this).children().each(function(i, item) {
var itemid = $(item).attr("id");
array[id][itemid] = i;
});
console.log(array)
}
});
Посмотри на мою скрипку.