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

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

事实证明，在调用$(this).sortable('cancel')之前，jQuery-sortable确实会改变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);
  }
});

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

1 个答案: