jquery - jQuery UI 可排序：获取防止 DOM 更改的新项目位置

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我知道我可以使用and计算新位置ui.position，但我相信 jQuery-sortable 已经完成了这项工作，因为它将占位符放在一个有效的位置，所以我只想得到这个值。

我怎么做？

Answer 1

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

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

这是工作代码：

$(".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);
  }
});