Следить за положением всех элементов в сортировке jQuery

Я пытаюсь выяснить, как я могу отслеживать, как элементы в jQuery сортируются. Скажем, что у меня есть четыре элемента (div) в моей сортировке, каждый из которых имеет уникальный идентификатор. Назовите их # 100, # 200, # 300 и # 400, и они будут представлены в этом порядке для начала. Но когда я перехожу на # 100, чтобы сказать пятно номер 3, мне нужно сохранить новую позицию для этого идентификатора, но также убедитесь, что другие также получают обновленные значения позиции.

Есть ли смысл? В основном я хочу получить позиции каждого уникального идентификатора, поэтому я могу сохранить порядок списка для последующего использования.

Я не смог найти что-то, что сообщает обо всех элементах в сортируемом, только для того, который был перемещен.

Направьте меня в правильном направлении? Благодаря

Ответ 1

Вы можете использовать событие остановки, предоставленное вам в сортировке для отслеживания элементов. Это небольшой пример;

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log($.map($(this).find('li'), function(el) {
                return el.id + ' = ' + $(el).index();
            }));
        }
    });
})(jQuery);

Это регистрирует массив всех элементов в сортировке с их идентификатором и их текущими индексами.

Вот пример работы с jsfiddle: http://jsfiddle.net/beyondsanity/HgDZ9/

Ответ 2

В соответствии с документами http://api.jqueryui.com/sortable/#method-toArray Я предлагаю вам использовать встроенный метод toArray. Пример:

  $(document).ready(function() {
    $('#sortable').sortable({
      stop: function(e, ui) {
        console.log($('#sortable').sortable('toArray'));
      }
    });
    $('#sortable').disableSelection();
  });

Ответ 3

Возможный дубликат jQuery UI Sortable Position.

В принципе, чтобы получить позицию элемента внутри сортируемого (или просто простого старого элемента), просто что-то вроде

$('#300').index();

Этот код вернет 2, если ничего не было перемещено (index() начинает отсчет в ноль) и обновляется при повторной компоновке элементов.

Вот демо: http://jsfiddle.net/XB5Dh/. Вы можете щелкнуть элемент, чтобы увидеть его позицию, и новая позиция отображается при перетаскивании элемента.