Wie kann ich mehrere sortierbare Listen miteinander in jQuery UI verbinden?

Question

Ich bin neu in jQuery, und ich bin zu kämpfen völlig mit der Verwendung von sortable jQuery UI.

Ich versuche, eine Seite, um gemeinsam Gruppierung und Reihenfolge der Posten zu erleichtern.

Meine Seite hat eine Liste von Gruppen und jede Gruppe enthält eine Liste von Elementen. Ich möchte, damit die Benutzer der Lage sein, folgendes zu tun:

  

  
1. Der Neuordnungs die Gruppen
  
2. Ordnen Sie die Elemente innerhalb der Gruppen
  
3. Verschieben Sie die Elemente zwischen den Gruppen
  

Die ersten beiden Anforderungen sind kein Problem. Ich bin in der Lage, sich einfach gut zu sortieren. Das Problem kommt mit der dritten Anforderung. Ich kann einfach nicht diese Listen miteinander verbinden. Einige Code könnte helfen. Hier ist das Markup.

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

Ich war in der Lage, die Listen zu sortieren, indem $('#groupsList').sortable({}); und $('.itemsList').sortable({}); im document ready function setzen. Ich versuchte, die connectWith Option für sortable mit, damit es funktioniert, aber ich nicht spektakulär. Was ich möchte, ist zu tun haben, die Liste jedes groupItemsX jedem groupItemsX Liste verbunden, sondern sich selbst. Wie soll ich das tun?

---

Ich dachte, ich brauchte, um gerade nicht um eine Liste zu sich selbst zu verbinden weniger es irgendeine Art von Kreis Bezug. Zugegeben, ich arbeite nicht mit Excel, aber es schien so eine Art von nicht enden wollenden Rekursion verursachen könnte, die einen Stapelüberlauf oder etwas bewirken würde. Hmm. Sorry für das Wortspiel. Könnte mir nicht helfen.

Wie auch immer, ich habe versucht, so etwas zu tun, und es hat nicht funktioniert:

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

Ich bin sicher, ich habe völlig die Syntax dort verstümmelt, und ich nehme an, dass der Grund, ich die Frage an erster Stelle fragen musste. Ist es überhaupt notwendig oder hilfreich leistungsmäßig das aktuelle Element aus der Liste zu filtern?

Sowohl die Antworten von Adam und JimmyP bereitgestellt arbeitete in IE (obwohl sie wirklich seltsam in FireFox verhalten, Überschreiben Listeneinträge, wenn Sie neu zu sortieren versuchen). Ich werde eine Ihrer Antworten akzeptieren und stimmen auf der anderen, aber wenn Sie Ideen / Vorschläge über die Filterung haben, würde Ich mag es zu hören.

Answer 1

Können Sie umfassen die Syntax, die Sie für connectWith verwendet? Haben legen Sie die Liste der anderen Gruppen in Klammern (auch wenn es ein Selektor)? Das heißt:

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

Answer 2

Dies sollte funktionieren:

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});

Answer 3

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

Dies wird alles in Ordnung für Sie gehen! tut das gleiche für mich hier. Keine Änderung erforderlich in Ihrem HTML.