时间戳

首页 > 解决方案 > 在可排序更改上更新 javascript 对象中的位置

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

问题描述

所以我有一个可排序的列表。我想将用户与之交互的列表中的项目的位置保留在对象中。我使用自定义 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。所以我的问题是，我如何检测到这种变化？我需要提到的是，我只需要保留用户与之交互的元素的位置。

标签： javascriptjqueryjquery-ui

解决方案

我找到了一种更简单的方法来保存用户与之交互的项目的特定位置。只需序列化订单，将用户拖动的项目保存到数组中，然后比较结果。

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');
    }
  });
}

推荐阅读