jQuery UI 可排序，其中数字不会移动

Question

我正在使用 jQuery UI 进行排名投票，您可以在此处查看示例。

我想更改它，以便当选民拖动候选人姓名时，姓名会移动，但旁边的数字不会移动。

我知道我可以通过隐藏列表数字并在可排序旁边添加一个单独的固定数字列表来做到这一点，但我希望有一个更简单的解决方案。

有什么简单的方法来实现这一点的想法吗？

Answer 1

我找到了一个非常简单的方法来完成这个任务。假设这是列表：

<div id="ballot">
<ol id="sortable">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</div>

那么下面的 javascript 将在每个列表项的左侧添加一个数字：

window.onload = function(){
  $("#sortable li").each(function(n) {
    var pos = $(this).position();
    var number = document.createElement('p');
    number.innerHTML = (n+1) + ".";
    $(number).css("position", "absolute");
    $("#ballot").append(number);
    $(number).position({
      my: "center",
      at: "left",
      of: this,
      offset: "-15 0"
    });
  });
};

我仍然是 javascript 和 jQuery 的菜鸟，所以我对代码中的任何愚蠢之处表示歉意。