jQuery無序列表到有序列表

我有一個填充無序列表，用戶可以將li拖入未填充列表。jQuery無序列表到有序列表

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

我想要做的是有無人居住列表成爲一個有序的列表，它會顯示添加元素的位置，如果用戶排序有序列表中的元素更新的位置。我想用這樣的事情的：

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

然後填充與當用戶移動到新的列表元素的數值位置空span標記，但我不知道這是否是最有效的方法去做這件事。

來源

2012-12-01 joe888

任何理由不把它作爲一個有序列表開始？ –

@ExplosionPills初始列表是問題列表，而第二個是用戶生成的其中一些問題的排名。 – joe888

可以使用text方法：

$('#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(); 
    } 
});

http://jsfiddle.net/6ZGqM/

來源

2012-12-01 00:57:23 undefined

不是'.droppable（）'而不是'.sortable（）'？ –

謝謝第二個解決方案幫助我完成了我想要完成的任務。 – joe888

您可以使用HTML -5data attributes對於這種情況..

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

來源

2012-12-01 00:55:45

jQuery無序列表到有序列表

回答

相關問題