jQuery anidado ordenable - Mover los elementos LI dentro de todos los UL disponibles

Question

Tengo el siguiente código que funciona, aunque funciona bastante lento, creo. Lo que quiero hacer es permitir que <li> 's se mueva libremente bajo los <ul>'s existentes o subirlos un nivel. También quiero poder crear jerarquías así que si arrastraste un <li> debajo de otro <li> que crearía una jerarquía. Creo que en ese sentido tendría que renderizar <ul> debajo de cada <li> por si acaso. Solo quiero limitarlo a 2 o 3 niveles de profundidad.

$("#sort_list").sortable({ 
    containment: 'parent',                      
    axis: 'y', 
    revert: true, 
    opacity: 0.8 
}); 
$(".sub_list").sortable({ 
    containment: 'parent', 
    axis: 'y', 
    revert: true, 
    opacity: 0.8, 
}); 
$("#sort_list").disableSelection(); 

<ul id="sort_list"> 
    <li>one</li> 
    <li>two 
    <ul class="sub_list"> 
    <li>sub one</li> 
    <li>sub two</li> 
    </ul> 
    </li> 
    <li>three</li> 
    <li>four</li> 
</ul> 

Answer 1

excelente respuesta a esto es

https://github.com/ilikenwf/nestedSortable

Me alegro de que lo he encontrado. jstree era demasiado pesado para mí.

Answer 2

Lo más probable es clasificable funcionalidad de la biblioteca jQuery UI no es tan configurable (es muy rudimentaria, destinado a ordenar listas un nivel de profundidad). Sería mejor simplemente usar uno de los plug-ins de árbol que admiten arrastrar y soltar.

El widget de árbol de jQuery UI es in development, pero se puede usar uno de los siguientes complementos:

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Answer 3

he utilizado JQuery Interface plugin cual fue fácil de configurar y funcionó bastante bien para esa tarea (consulte el demo), pero quería algo más ligero y que no requieren complementos adicionales.

Incluso jQuery se puede ordenar de interfaz de usuario de la biblioteca es una especie de rudimentaria todavía se puede lograr de alguna manera que la funcionalidad:

$("ul").sortable({ 
items: '> li', 
axis: 'y', 
update: function (e, ui) { 
    ... 
} 

Esto le permitirá ordenar "li" bajo cualquier "ul" (si recuerdo correctamente). Sin embargo, no le permitirá mover elementos "li" de una "ul" a otra "ul". Incluso es posible hacerlo (cambiando la configuración), encontré que no es tan estable y de alguna manera engorroso.

Se me ocurrió una solución simple: un "botón indicador", que desactiva la clasificación y activa el movimiento ... ¡y funciona como un amuleto! Todo lo que tiene que hacer es realizar un seguimiento de la id del padre "li" antes y después de moverlo.

Mis 5 centavos.

Answer 4

Un plugin jquery "encajable". Perfecto para lo que estoy tratando de hacer:

http://dbushell.com/2012/06/17/nestable-jquery-plugin/