Un élément peut-il accepter des gouttelettes triables pour le compte d'un autre?

Question

J'ai deux listes triables connectées, mais chacune est dans un élément de bloc plus grand. Quelque chose comme:

<div class="items_box"> 
    <ul class="items"> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</div> 

<div class="items_box"> 
    <ul class="items"> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</div> 

Avec ce Javascript:

$(".items").sortable({connectWith: [".items"]}); 

Les .items_box divs sont plus grands alors les listes. Je voudrais faire l'ensemble de chaque div accepter des articles au nom de sa liste. Comment ferais-je cela?

Answer 1

La solution est de rendre le récipient le triables et changer les .items propriété à rechercher vos articles dans la liste.

$('.items_box').sortable({ 
    connectWith: '.items_box', 
    items: '> .items > li' 
}); 

J'ai posté un working example pour vous (bien qu'il y ait des problèmes avec glisser dans une liste vide, mais c'est un nouveau problème;)

Notez également qu'aucun connectWith permet plus des tableaux de sélecteurs. Séparer les avec des virgules à la place.