Question

所以我有一个可排序的列表。我想将项目的位置保留在用户与对象进行交互的列表中。我使用一个自定义ID来标识列表中的项目以及放置它们的位置。问题是，如果我将某个项目拖放到某个位置，然后再将先前放置在该位置的项目拖放到一个位置，则以下各项的所有位置都会改变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);
    }
  });
}

我使用对象的原因是因为我想在beforeunload事件中将对象作为json上传到数据库中（所以在所有列表更改后我都需要一个对象）。

例如，我将元素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');
    }
  });
}

在可排序更改上更新javascript对象中的位置

1 个答案: