2010-10-25 8 views
3

J'ai un certain nombre de ul que l'utilisateur peut trier. J'ai 2 types différents de li et ai besoin de limiter la liste dans laquelle ils peuvent être déposés. Voici un petit exemple:JQuery UI Sortable - Limiter la limite à certains éléments

<ul class="top"> 
    <li class=typeA">Item</li> 
    <li class=typeA">Item</li> 
    <li class=typeB">Item</li> 
     <ul class="sub"> 
      <li class=typeB">Item</li> 
      <li class=typeB">Item</li> 
      <li class=typeB">Item</li> 
     </ul> 
</ul> 

<ul class="top"> 
    <li class=typeA">Item</li> 
    <li class=typeA">Item</li> 
    <li class=typeA">Item</li> 
</ul> 
  1. TypeA ne peut jamais apparaître au niveau supérieur, et ne doit pouvoir être tombé dans un autre groupe de haut niveau.

  2. TypeB peut apparaître au niveau supérieur ou inférieur et doit pouvoir être déposé dans l'un ou l'autre groupe.

  3. De même, le groupe sub ul doit pouvoir être déposé d'un groupe supérieur à l'autre.

En utilisant le code suivant, je suis en mesure de acheive points 1 et partie 2, mais quand un TypeB a été déplacé du sous-groupe dans le groupe de tête il peut alors jamais revenir en arrière:

$(function() { 
    $('.connectedSortable').sortable({ 
     'items': '> li', 
     'connectWith': '.connectedSortable' 
    }); 
    $('.subList').sortable({ 
     'items': 'li', 
     'connectWith': '.connectedSortable' 
    }); 
}); 

Toute aide serait grandement appréciée.

Merci

Répondre

0

Je ne pense pas que vous pouvez y parvenir avec juste la configuration d'une table, car une fois que vous déplacez un élément B au niveau supérieur sa va se comporter comme un élément A. Je pense que vous allez devoir définir des événements sur chaque table, comme l'événement 'over', et écrire du code pour vérifier si l'élément déplacé appartient à cette liste ou non.

Questions connexes