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

感谢Alexandr Fedotov！他开车送我走在正确的道路上！ :) 这是我的解决方案：

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>时，我都必须创建一个表格。然后，我抓住那个被拖拽的人。在函数“update”中，我们从数组中删除项目（先前保存到变量oldIndex）然后我们将它添加到数组中的新索引中。我希望这会对别人有所帮助！：）

Answer 3

可能的解决方案：稍微修改标记，将data-attribute添加到每个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);

之后，您将使用正确的元素顺序（与视图相同）。如果您不需要动态重新排序数组 - 您可以创建原始数组的副本并对副本执行修改。

使用拖放重新排序数组

3 个答案: