JQuery Sortable qui fait défiler

Question

J'ai deux sortables jquery qui se connectent les uns aux autres (code ci-dessous).

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

Ce que je voudrais faire est de l'un d'eux un panneau de défilement (#da_available_sortable) pour que je puisse avoir plusieurs « pages » de l'élément sortable que je peux déplacer entre les panneaux.

Je ne peux pas sembler trouver loin de faire cela qui ne me cause pas d'avoir à diviser le panneau "disponible" en plusieurs li. Il est évident que cela ne fonctionnera pas lorsque je veux faire glisser des éléments dans le tri "multi-pages" car chaque li devra être trié séparément.

Je voudrais que le #da_available_sortable sortable affiche 10 éléments à la fois sous la forme de deux lignes de cinq.

Est-ce que quelqu'un a déjà fait cela avant cela peut me montrer la voie à suivre?

Merci

Answer 1

Il est assez difficile de comprendre ce que vous essayez d'atteindre. Cherchez-vous quelque chose comme ça?

http://jsbin.com/ekinog/8

En tête:

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

dans le corps:

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