web-dev-qa-db-fra.com

Comment connecter plusieurs listes de tri des utilisateurs à JQuery UI?

Je suis nouveau à JQuery, et je me débats totalement avec l'utilisation de JQuery Ui sortable.

J'essaie de mettre en place une page pour faciliter le regroupement et la commande d'articles.

Ma page a une liste de groupes et chaque groupe contient une liste d'éléments. Je veux permettre aux utilisateurs de pouvoir effectuer ce qui suit:

  1. Réorganiser les groupes
  2. Réorganiser les éléments dans les groupes
  3. Déplacer les objets entre les groupes

Les deux premières exigences ne sont pas un problème. Je suis capable de les trier juste bien. Le problème entre avec la troisième exigence. Je ne peux tout simplement pas connecter ces listes les unes aux autres. Certains code peuvent aider. Voici le balisage.

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>

J'ai pu trier les listes en mettant $('#groupsList').sortable({}); et $('.itemsList').sortable({}); dans le document ready function. J'ai essayé d'utiliser l'option connectWith pour sortable pour le faire fonctionner, mais j'ai échoué de manière spectaculaire. Ce que je voudrais faire, c'est avoir la liste groupItemsX connecté à chaque liste groupItemsX mais elle-même. Comment devrais-je faire ça?

Je pensais que j'avais besoin de ne pas connecter spécifiquement une liste à elle-même moins qu'il y ait une sorte de référence circulaire. Certes, je ne travaille pas avec Excel, mais cela semblait être capable de causer une sorte de récursivité sans fin qui causerait un débordement de pile ou quelque chose du genre. Hmm. Désolé pour le jeu de mots. Ne pouvait pas m'aider moi-même.

Quoi qu'il en soit, j'essayais de faire quelque chose comme ça, et cela ne fonctionnait pas:

$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function () {  
    $(this).sortable( {  
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    });  
});

Je suis sûr que j'ai complètement mangé la syntaxe là-bas et je suppose que c'est la raison pour laquelle je devais poser la question en premier lieu. Est-ce même nécessaire ou utile de performances utiles pour filtrer l'élément actuel de la liste?

Les deux réponses fournies par Adam et Jimmyp ont fonctionné dans IE (bien qu'ils se comportent vraiment étrangement dans Firefox, écrivant des éléments de liste lorsque vous essayez de résoudre). Je vais accepter l'une de vos réponses. et voter sur l'autre, mais si vous avez des idées/suggestions sur le filtrage, j'aimerais l'entendre.

javascriptjqueryajaxjquery-uijquery-ui-sortable
32
Abs

Pouvez-vous inclure la syntaxe que vous avez utilisée pour connectWith? Avez-vous placé la liste des autres groupes entre crochets (même si c'est un sélecteur)? C'est-à-dire:

...sortable({connectWith:['.group'], ... }
23
Adam Bellaire

Cela devrait fonctionner:

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});
17
James
 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

Cela va tout va bien pour vous! faire la même chose ici pour moi. Aucun changement requis dans votre HTML.

2
Mrigesh Raj Shrestha