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>