jquery无序列表到有序列表

我有一个填充的无序列表，用户可以将li拖到一个未填充的列表中

<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>

项目1
项目2
项目3
项目4
项目5

我想做的是让未填充的列表变成一个有序列表，它显示添加元素的位置，并在用户对有序列表中的元素排序时更新位置。我想用这样的东西：

<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>

项目1
项目2
项目3
项目4
项目5

---

然后，当用户将元素移动到新列表时，用元素的数字位置填充空span标记，但我不知道这是否是最有效的方法。

对于这种情况，您可以使用HTML-5

数据属性

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


第1项
第2项
第3项
第4项
第5项

您可以使用
文本
方法：

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

或者创建jQuery方法并在更新事件时调用它：

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

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

有什么理由不把它作为一个有序列表来开始吗？@ExplosionPills最初的列表是一个问题列表，而第二个是用户生成的一些问题的排名。不是
.droppable（）
而是
.sortable（）
？谢谢第二个解决方案帮助我完成了我想要完成的任务。