jQuery UI sortable where numbers don't move

I'm using jQuery UI for a ranked ballot and you can see an example here.

I'd like to c开发者_JAVA百科hange it so that when the voter drags the candidate names, the names move but the numbers next to them don't.

I know I could do this by hiding the list numbers and adding a separate, stationary list of numbers next to the sortable, but I was hoping for a simpler solution.

Any ideas for an easy way to accomplish this?

---

I found a pretty easy way to accomplish this. Suppose this is the list:

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

Then the following javascript will add a number to the left of each list item:

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

I'm still a noob with javascript and jQuery so I apologize for any silliness in the code.