Обновление позиций в объекте JavaScript при сортируемом изменении

Question

Итак, у меня есть сортируемый список.Я хочу сохранить позиции элементов в списке, с которыми пользователь взаимодействовал, в объекте.Я использую пользовательский идентификатор, чтобы идентифицировать элементы в списке вместе с позицией, в которой они были сброшены.Проблема в том, что, если я перетаскиваю элемент в позиции, за которой следуют элементы, ранее упавшие там, все позиции следующих элементов меняются на 1 позицию.

async function makeSortable()
{
  sortableList = $("#itemlist");
  $(sortableList).sortable({
    stop: function(event, ui)
    {
      var order = new Object();
      order.id = ui.item.attr("id").substr(3);
      order.position = ui.item.index();
      console.log(order);
      temp['items'].push(order);
    }
  });
}

Причина, по которой я используюобъект, потому что я хочу загрузить объект как json в базу данных по событию beforeunload (поэтому мне нужен один объект после всех изменений списка).

Например, я перемещаю элементы 3,4,5в позиции 0,1,2 соответственно, и я получаю этот объект:

{"items":[{"id":"3","position":0},{"id":"4","position":1},{"id":"5","position":2}]}

Теперь, если я перетаскиваю элемент 8 в позицию 1, я получаю это:

{"items":[{"id":"3","position":0},{"id":"4","position":1},{"id":"5","position":2},{"id":"8","position":1}]}

Мне нужнопозиции элементов с id 4 и 5 для обозначения позиций 2 и 3 соответственно, согласно обновленному списку.Итак, мой вопрос, как я могу обнаружить это изменение?Я должен упомянуть, что мне нужно сохранять только те элементы, с которыми взаимодействовал пользователь.

Answer 1

Я нашел более простой способ сохранить определенные позиции элементов, с которыми взаимодействовал пользователь.Просто сериализуйте порядок, сохраните в массив, какие элементы были перетащены пользователем, а затем сравните результаты.

async function makeSortable()
{
  sortableList = $("#itemlist");
  $(sortableList).sortable({
    update: function(event, ui)
    {
      if (temp && !temp.includes(ui.item.attr("id")))
      {
        temp.push(ui.item.attr("id"));
      }
      var data = $(this).sortable('serialize');
    }
  });
}