jQuery UI Sortable - interdisant le transfert dans les éléments enfants

Question

Je travaille avec les triables de l'interface utilisateur de jQuery et j'ai créé un système de divs dans ce format;

<div class='mainDiv'> 
    <label>text: <input type='text' name='textbox' /></label> 

    <div class='children'> 
     <div class='mainDiv'>...</div> 
     <div class='mainDiv'>...</div> 
     <div class='mainDiv'> 
      <label>text: <input type='text' name='textbox' /></label> 
      <div class='children'>...</div> 
     </div> 
    </div> 
</div> 

Les divs peuvent avoir un nombre infini d'enfants, et je veux être en mesure de faire glisser et déposer toutes les années .mainDiv dans leur boîte de parent, j'ai donc utilisé ceci:

$(".mainDiv").parent().sortable({items: ".mainDiv", containment: "parent"}); 

Cependant, cela permet de faire glisser les éléments dans leur enfant ou leur frère .children divs. ce que je ne veux pas arriver. Je veux limiter les éléments à rester dans leur parent.

Toute aide ici serait chaude.

Vive

Answer 1

j'ai réussi à le résoudre comme ceci:

$(this).parent().sortable({ 
    items: '> li', 
    axis: 'y', 
    ... 
}); 

Dans votre cas, il devrait fonctionner avec:

items: '> .mainDiv' 

confinement : "parent" n'est pas nécessaire .

Dans mon cas, j'active "sortable" lors d'un clic précédent, car il est plus rapide. Je pense que c'est plus facile si vous le liez à l'événement "mousedown". Si vous créez l'arbre dynamiquement (par exemple Ajax), je vous recommande d'utiliser "livequery".