javascript - ejemplos - ¿Cómo conecto varias listas ordenables entre sí en jQuery UI?

jquery autocomplete select

Question

Soy nuevo en jQuery, y estoy totalmente luchando con el uso de la sortable jQuery UI.

Estoy tratando de armar una página para facilitar la agrupación y el orden de los artículos.

Mi página tiene una lista de grupos, y cada grupo contiene una lista de elementos. Quiero permitir que los usuarios puedan hacer lo siguiente:

1. Reordenar los grupos
2. Reordenar los artículos dentro de los grupos
3. Mueva los elementos entre los grupos

Los primeros dos requisitos no son un problema. Puedo ordenarlos muy bien. El problema viene con el tercer requisito. Simplemente no puedo conectar esas listas entre sí. Algún código puede ayudar. Aquí está el marcado.

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

Pude ordenar las listas colocando $(''#groupsList'').sortable({}); y $(''.itemsList'').sortable({}); en la document ready function . Traté de usar la opción connectWith para poder hacer que funcione, pero fallé espectacularmente. Lo que me gustaría hacer es tener cada groupItemsX listas de groupItemsX conectadas a cada lista de groupItemsX pero solo. ¿Cómo debo hacer eso?

Estaba pensando que necesitaba específicamente no conectar una lista a sí mismo, menos que haya algún tipo de referencia circular. De acuerdo, no estoy trabajando con Excel, pero parecía que eso podría causar algún tipo de recursión interminable que causaría un desbordamiento de la pila o algo así. Hmm. Perdón por el juego de palabras. No pude ayudarme a mí mismo.

De todos modos, estaba tratando de hacer algo como esto, y no estaba funcionando:

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

Estoy seguro de que he destrozado por completo la sintaxis allí, y supongo que esa es la razón por la que tuve que hacer la pregunta en primer lugar. ¿Es necesario o útil para el rendimiento filtrar el elemento actual de la lista?

Ambas respuestas proporcionadas por Adam y JimmyP funcionaron en IE (aunque se comportan de manera muy extraña en Firefox, sobrescribiendo los elementos de la lista cuando intentas volver a ordenar). Aceptaré una de sus respuestas y votaré por la otra, pero si tiene ideas / sugerencias sobre el filtrado, me gustaría escucharla.

Answer 1

¿Puedes incluir la sintaxis que connectWith para connectWith ? ¿Colocaste la lista de otros grupos entre corchetes (incluso si es un selector)? Es decir:

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

Answer 2

Esto debería funcionar:

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

Answer 3

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

¡Todo irá bien para ti! haciendo lo mismo aquí para mí. NO se requiere cambio en su HTML.