jQuery UI 可排序 : get new item position preventing DOM changes

Question

我的页面上有一个可排序的列表。我只想知道用户的意图:他拖动什么项目以及在哪里，即拖动元素的旧位置和新(潜在)位置。

但我不希望 jQuery-sortable 真正改变我的 DOM ——我想自己做。这是示例:

$(".sortable-list").sortable({
  items: ".sortable-item",
  stop: function (event, ui) {
    // prevent DOM changes
    $(this).sortable('cancel');
    // get the indices
    var oldIndex = $(this).find('.sortable-item').index(ui.item);
    var newIndex = 'how?'; // this is the question
  }
});

我知道我可以使用 ui.originalPosition 和 ui.position 计算新位置，但我相信 jQuery-sortable 已经完成了这项工作，因为它在其中放置了一个占位符一个有效的地方，所以我只想获取该值。

我该怎么做？

Answer 1

嗯，当我写一个问题时，我实际上找到了解决方案。

事实证明，jQuery-sortable 在我调用 $(this).sortable('cancel') 之前确实更改了 DOM。此调用实际上所做的是恢复插件所做的更改。

这是工作代码:

$(".sortable-list").sortable({
  items: ".sortable-item",
  stop: function (event, ui) {
    var newIndex = $(this).find('.sortable-item').index(ui.item);
    $(this).sortable('cancel');  // revert changes
    var oldIndex = $(this).find('.sortable-item').index(ui.item);
  }
});