Question

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

I’d like to change 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?

Answer 1

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.