javascript - 通过拖放重新排序数组

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