通过拖放对数组重新排序

Question

我有一个像这样的数组：

tableObj =  [
  {
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
  },
  {
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
  },
  {
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
  },
  {
    label: 'tags',
    value: 26,
    element: '$(the li that this info is about)',
    index: 3
  }
];

当我显示数组的内容时，我这样做：

$(".sortable-list").sortable({
  axis: "y",
  containment: ".sortable-list",
  revert: true,
  start: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.value = updt;
  },
  update: function(event, ui) { 
    var updt = ui.item.index();
    tableObj.index = updt;
  }
});
$( "#sortable" ).disableSelection();

显示为<li> ，在空的<ul class=".sortable-list"></ul>之间进行标记。 我想要做的是拖动<li>标记并对元素进行重新排序，然后通过单击按钮来捕获数组的新状态。 这意味着，如果我将第二个元素移到第一个位置，则当我单击按钮时，数组将在位置0的第二个元素中重新排序。我要使用上面的jQuery函数要做的就是设置一个新值，但是我无法捕获重新排序的新数组。

有人可以帮我吗？ 先感谢您 ！ :)

Answer 1

使用var newList=$(".sortable-list").sortable("toArray")

查看以下Codepen示例：

https://codepen.io/Sinetheta/pen/qvbCr?editors=1111

https://codepen.io/fraigo/pen/WawQBy

Answer 2

感谢亚历山大·费多托夫！ 他开车带我走了正确的路！ :)这是我的解决方案：

var manipulate, oldIndex;
$(".sortable-list").sortable({
     axis: "y",
     containment: ".sortable-list",
     revert: true,

     start: function(event, ui) { 
          var updt = ui.item.index();
          manip = updt;
          console.log("Start: " + manipulate);
          oldIndex = sortableList[manipulate];
     },

     update: function(event, ui) { 
          var newIndex = ui.item.index();
          console.log("End: " + newIndex);
          sortableList.splice(manipulate, 1);
          sortableList.splice(newIndex, 0, oldIndex);

          console.log(sortableList);
          }
   });

   $(".sortable-list").disableSelection();

每次添加<li>时，我都必须创建一个表。 然后，我发现谁是被拖放的人。 在“更新”函数中，我们从数组中删除该项（以前保存到变量oldIndex ），然后将其添加到数组中的新索引中。 我希望这会对其他人有所帮助！ :)

Answer 3

可能的解决方案：稍微修改标记，为每个li添加数据属性，其中li包含tableObj数组中当前元素的标识符。

在更新函数中，获取当前移动元素的标识符：

var id = $(event.toElement).data('id');

使用此标识符在tableObj数组中找到元素：

var obj = tableObj.find(function(o) { return o.id === id});

然后找到最近移动的对象的旧索引：

var oldIndex = tableObj.indexOf(obj);

获取对象的新索引：

var newIndex = ui.item.index();

然后从旧位置删除obj并在新索引处插入：

tableObj.slice(oldIndex, 1);
tableObj.slice(newIndex, 0, obj);

然后，您将获得具有正确元素顺序的数组（与视图上的顺序相同）。 如果您不需要即时重新排列数组-您可以创建原始数组的副本并在副本上进行修改。