Problema con anidada jQuery sortables

Question

Aquí está la estructura de HTML básico para mi página:

<div id="selectedItemsTop"> 
    <ul> 
     <li> 
      Root element 
      <ul> 
       <li>Level One a</li> 
       <li>Level One b</li> 
       <li> 
        Level One parent 
        <ul> 
         <li>Level Two a</li> 
         <li> 
          Level Two parent 
          <ul> 
           <li>Level Three a</li> 
           <li>Level Three b</li> 
          </ul> 
         </li> 
         <li>Level Two b</li> 
        </ul> 
       </li> 
       <li>Level One c</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

por ejemplo:

• elemento raíz
  • nivel uno un
  • Nivel Uno b
  • padre de nivel uno
    • Nivel Dos un
    • Nivel Dos padres
      • Nivel Tres un
      • Nivel Tres b
    • Nivel Dos b
  • Nivel Uno c

Puede haber cualquier número de elementos en cada nivel de sangría más allá de la raíz, pero solo habrá 3 niveles, y solo uno por nivel (es decir: siempre hay exactamente 3 <ul> bajo la raíz, pero el número de <li> s es variable).

Permitiré al usuario reordenar esta estructura utilizando el complemento jQuery UI Sortable. Para agregar un nuevo ítem, hay tres grupos de ítems (ítems de nivel uno, ítems de nivel dos, ítems de nivel 3) que se ubican adyacentes en la página de este árbol. El usuario puede arrastrar desde allí a la lista para agregarla, pero debe agregarse en el nivel correspondiente.

tengo unas pocas cosas de trabajo que ya utilizan draggable con la opción connectToSortable:

$('ul.availableItems').each(function(i) { 
    var selector = "#selectedItemsTop > ul"; 
    for (var j = 0; j <= i; ++j) { // count from 0 to [0, 1, 2] 
     selector += " > li > ul"; 
    } 
    // eg: selector == "#selectedItemsTop > ul > li > ul" 
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul" 
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul > li > ul" 
    $(this) 
     .find('li') 
     .draggable({ 
      connectToSortable : selector 
     }) 
    ; 
}); 
$('#selectedFieldsTop > ul > li ul').sortable(); 

Como ya he dicho, esto funciona ... en todo, excepto IE. Los ítems de nivel uno funcionan perfectamente, sin embargo, no se agregarán elementos de nivel 2 o 3 en la clasificación. Tratar de ordenar uno de los elementos de Nivel 2 o 3 que ya están allí hace que recoja todo el li de "Nivel Uno para padres" y lo mueva todo.

¿Hay algo que se pueda pensar que haría que esto funcione en Firefox pero no en IE? ¿Podrías pensar en una forma diferente de manejar esto?

_{versiones: Firefox 3.6, IE7, jQuery 1.3.2, jQuery UI 1.7.2}

actualización:
Aquí está el código de trabajo sobre JSBin: http://jsbin.com/ixabo/edit - Como era de esperar, que doesn' trabajo en IE, pero creo que es un problema con JSBin ("_console no está definido"). Para verlo a medio trabajar, tal vez copie/pegue en un archivo local y ábralo en IE.

Answer 1

¿Puedes usar otros complementos? jsTree hace este tipo de cosas muy bien.

Answer 2

También tuve problemas con sortable anteriormente: mi caso fue de acordeón y clasifica dentro. No pude obtener una respuesta clara, pero si observas cualquiera de las implementaciones de árbol, están usando el método de arrastrar y soltar directamente y no se pueden ordenar.

Basado en esta experiencia, no muy exacto, lo sé, estoy de acuerdo con akiller y digo: tome un buen plugin de árbol en lugar de tratar de hacer esto usted mismo con ordenable. jsTree es bastante bueno y debería hacer el trabajo; también hay otros si, por alguna razón, jsTree no se ajusta a tus necesidades.