如何用jQuery可排序移動多個表中的行

Question

我有這樣的一個表：

<table id="sortable"> 
    <tr id="d1" class="mainrow"><td class="handle">O</td><td>Item 1</td></tr> 
    <tr id="d1b"><td>&nbsp;</td><td>blah</td></tr> 
    <tr id="d2" class="mainrow"><td class="handle">O</td><td>Item 2</td></tr> 
    <tr id="d2b"><td>&nbsp;</td><td>blah</td></tr> 
    <tr id="d3" class="mainrow"><td class="handle">O</td><td>Item 3</td></tr> 
    <tr id="d3b"><td>&nbsp;</td><td>blah</td></tr> 
    <tr id="d4" class="mainrow"><td class="handle">O</td><td>Item 4</td></tr> 
    <tr id="d4b"><td>&nbsp;</td><td>blah</td></tr> 
</table> 

及以下的JavaScript來設置排序屬性：

$("#sortable tbody").sortable({ 
    stop: hasChanged, 
    handle: '.handle', 
    cursor: 'move', 
    items: ".mainrow" 
}); 

我想保持奇數和甚至當我移動一個奇數行時一起行（甚至行沒有句柄，所以不能被拾起）。

我的hasChanged函數在拖放發生後移動偶數行，但拖動時視覺效果看起來不正確;間隙出現在奇數行下，我希望它出現在偶數行的下方，因爲這是在hasChanged函數完成後最終會出現的位置。

任何人都知道如何做到這一點？

Answer 1

沒關係，想通了：

$("#sortable tbody").sortable({ 
    stop: hasChanged, 
    over: movePlaceholder, 
    handle: '.handle', 
    cursor: 'move' 
}); 

我只是改變我的movePlaceholder函數中的佔位符的位置：

function movePlaceholder(e, ui) 
{ 
    if (ui.placeholder.prev().attr("id").length == 2) 
    ui.placeholder.insertAfter(ui.placeholder.next()); 
} 

按照要求，hasChanged功能：

function hasChanged(e, ui) 
{ 
    var newPosition = ui.item.index(); 
    var id = ui.item.attr("id"); 

    // whatever you need to do goes here 
}