jQuery：一個可排序的列表，在另一個列表上顯示結果

我正在使用jQuery UI Sortable使列表可排序。我還有另一個不可排序的列表，當我對可排序列表進行排序時，我想更新它，以便它顯示與排序列表相同的順序。jQuery：一個可排序的列表，在另一個列表上顯示結果

display_only列表中的項目將包含輸入字段，因此理想情況下「display_only」中的項目也應該在DOM中移動，但不是要求。

我已經嘗試過所有我可以想到的事情，比如分離元素並嘗試將它重新插入到新的順序等，但我無法真正弄清楚它。任何能夠讓我朝着正確方向發展的東西都會很棒！

示例HTML：

<ul id="sortable"> 
    <li data-id="1">Item 1</li> 
    <li data-id="2">Item 2</li> 
    <li data-id="3">Item 3</li> 
</ul> 
<ul id="display_only"> 
    <li data-id="1">Item 1 and som other content</li> 
    <li data-id="2">Item 2 and som other content</li> 
    <li data-id="3">Item 3 and som other content</li> 
</ul>

來源

2011-11-02 Kristoffer

也許像這樣的功能添加到您可以排序的「停止」事件？ 'stop：function（）{ \t var sourceHtml = $（'＃sortable'）。html（）; \t $（'＃display_only'）。html（sourceHtml）.find（'li'）。append（''）; }' – artlung

怎麼樣使用$ .fn.clone（）方法克隆排序UL 和triggring克隆每次你用那種

$('#sortable').bind('sort', function(e,ui){ 
    $newlist = $(this).clone(); 

    $('#display_only').remove(); //removing the old list 
    $newlist.attr('id','display_only'); // giving the right id for the cloned element 
    $(this).append($newlist) 

});

通知我不確定你的研究的確切語法，但我認爲這應該工作

注意到jquery您可能會遇到一堆事件，您應該爲您綁定正確的一個jquery ui sortable events我懷疑'停止'，'beforeStop'或'change'會是正確的

另一個編輯和解決方案可能是：第一個經過其他列表進行排序，automaticaly與像事件綁定：

$('#sortable').bind('sort', function(e,ui){ 
    $("#display_only).sortable() 

});

簡單而高貴

來源

2011-11-02 22:41:46 alonisser

這是在正確的軌道上，但不是那裏。根據#sortable列表，我無法獲得「#display_only」中的列表重新排序。請記住，「#display_only」包含除#sortable之外的其他內容，所以我不能只克隆該列表。我有一個想法，那就是使用可能的serialize（）來獲得新的順序，並以某種方式重新索引「#display_only」。我目前使用停止，但更新應該工作。 – Kristoffer

啊我沒有意識到display_only列表與原始列表中的數據不同。我看到你已經找到了解決方案。請注意，如果唯一的區別是li中的輸入字段，那麼您仍然可以使用該克隆並遍歷列表並相應地添加輸入文件。 – alonisser

之後，如果調整了一下我得到它的工作。我不確定這是否是解決問題的最佳方法，但它是有效的。在停止時，我調用我的函數重新排序「#display_ only」中的項目，該項目循環遍歷新訂單，並將其推入數組中。

在「#display_only」通過我的項目，我環路後和分離它們以相同的順序，然後只將它們附加到我的列表，像這樣：

function reorder() { 
    var newOrder = []; 
    $('#sortable li').each(function(i) { 
     newOrder.push($(this).attr('data-id')); 
    }); 
    $('#display_only li').each(function(i) { 
     var item = $("li[data-id="+newOrder[i]+"]").detach(); 
     $('#display_only').append(item); 
    }); 
}

來源

2011-11-03 10:06:54 Kristoffer

實際上這個解決方案有很多問題。但主要的一點是，我認爲這不會以正確的方式工作。考慮這兩個列表是：b，d，c，a排序後第一個是a，b，c，d。那麼你將採取一個元素data-id並將其添加到第二個列表中的b元素。 – alonisser

有沒有真正需要使用數組這裏。但是，您可以輕鬆地在其中定義數組項目。

$('#sortable').sortable({ 
     start: function(event, ui){ 
       iBefore = ui.item.index(); 
     }, 
     update: function(event, ui) { 
       iAfter = ui.item.index(); 
       evictee = $('#display_only li:eq('+iAfter+')'); 
       evictor = $('#display_only li:eq('+iBefore+')'); 

       evictee.replaceWith(evictor); 
       if(iBefore > iAfter) 
        evictor.after(evictee); 
       else 
        evictor.before(evictee); 
     } 
});

我確定將它寫入一個函數並將父選擇器作爲參數傳遞是更合適的。

來源

2012-01-31 18:57:25 aowie1

很好的答案，它節省了我的洞天 –

jQuery：一個可排序的列表，在另一個列表上顯示結果

回答

相關問題