JQuery可排序的滾動

Question

我有兩個jQuery的排序相互連接（代碼如下）。

$('#da_favourites_sortable').sortable({ 
    connectWith: '#da_available_sortable', 
    handle: 'img.da_icon_handle', 
    revert: true 
}); 

$('#da_available_sortable').sortable({ 
    connectWith: '#da_favourites_sortable', 
    handle: 'img.da_icon_handle', 
    revert: true 
}); 

我希望做的是讓他們滾動面板（#da_available_sortable）中的一個，這樣我可以有我可以在面板之間移動排序元素的多個「頁」。

我似乎無法找到這樣做，這不會導致我不得不將「可用」面板拆分爲多個li。這顯然不會起作用，因爲我想將元素拖到「多頁」排序中，因爲每個元素最終都必須是單獨排序的。

我希望#da_available_sortable可排序顯示一次10個元素爲兩行五個。

以前有人做過這件事，可以告訴我前進的方向嗎？

謝謝

Answer 1

這很難理解你要達到的目標。你在找這樣的東西嗎？

http://jsbin.com/ekinog/8

在頭：

<style> 
    #wrapper { 
    border:solid 1px #cacaca; 
    height:5em; 
    overflow-y:scroll; 
    } 
</style> 
<script type="text/javascript"> 
$(function(){  

$('#da_favourites_sortable').sortable({ 
    connectWith: '#da_available_sortable', 
    revert: true 
}); 

$('#da_available_sortable').sortable({ 
    connectWith: '#da_favourites_sortable', 
    revert: true 
}); 


}); 
</script> 

在體：

<ul id="da_favourites_sortable"> 
    <li>Lorem</li> 
    <li>Ipsum</li>   
    </ul>  

    <div id="wrapper"> 
    <ul id="da_available_sortable"> 
    <li>Dolor</li> 
    <li>Sit</li> 
    <li>Amet</li> 
    <li>Consectetur</li> 
    <li>Adipiscing</li> 
    <li>Elit</li> 
    </ul> 
</div>