Question

I have one populated unordered list which the user can drag an li into an unpopulated list.

<ul id="sortable1" class="connectedSortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li></li>
</ul>

What I want to do is have the unpopulated list become an ordered list which displays the position of the added elements and updates the positions if the user sorts the elements within the ordered list. I was thinking of using something like this:

<ul id="sortable1" class="connectedSortable">
    <li><span> </span>Item 1</li>
    <li><span> </span>Item 2</li>
    <li><span> </span>Item 3</li>
    <li><span> </span>Item 4</li>
    <li><span> </span>Item 5</li>
</ul>

Then populating the empty span tag with the numerical position of the element when the user moves it to the new list but I do not know if that is the most efficient way to go about this.

Answer 1

You can use the text method:

$('#sortable1 span').text(function(i){
   return ++i
})

Or create a jQuery method and calls it on update event:

$.fn.populate = function(){
    this.each(function(i){
       this.innerHTML = ++i;
    })
}

$("#sortable1").sortable({
    update: function( event, ui ) {
       $('#sortable1 span').populate();
    }
});

http://jsfiddle.net/6ZGqM/