Lista ordenable + anidada con jQuery UI 1.8.2

Question

Esta pregunta ha terminado, pero nadie parece haber tenido el mismo problema que yo.

Cuando hago algo como esto

$(function(){ 
    $('#unique-ul').sortable({items:'li'}); 
}); 

Me esperaba que "sólo trabajo". En general, lo hace. Puedo arrastrar cualquier <li> de cualquier lista a cualquier otra lista, y cualquier sublista de ese <li> se arrastra con él.

Sin embargo, al arrastrar, parece realmente confundirse acerca de dónde debe soltarse. Aquí hay un ejemplo usando 1.8.0; muestra el mismo comportamiento.

http://jsbin.com/ewuxi3/

Todas las otras respuestas que he encontrado sobre este me llevan a creer que este comportamiento es apoyado por jQuery UI; por ejemplo, aquí hay un error registrado contra 1.7 sobre los juegos de arrastre anidados: http://dev.jqueryui.com/ticket/4333

No puedo encontrar a nadie más que haya tenido este problema, así que sugiere que lo estoy haciendo mal. ¿Alguna pista?

Answer 1

esto sucede porque ordenable realmente no sabe si está por encima del <li> anidado o el que lo contiene. Una solución es utilizar una estructura como esta:

<ul> 
    <li><div>Item 1</div> 
    <ul> 
     <li><div>Subitem 1</div></li> 
     <li><div>Subitem 2</div></li> 
    </ul> 
    </li> 
    <li><div>Item 2</div></li> 
    <li><div>Item 3</div></li> 
</ul> 

y establezca la opción toleranceElement: '> div'. No sé por qué no está documentado, pero está ahí y le dice a Sortable que tenga en cuenta solo el <div> al calcular las intersecciones.

En caso de que le interese, hace poco developed a plugin que facilita la ordenación anidada, lo que permite crear nuevas listas anidadas sobre la marcha.