Tengo el siguiente código que funciona aunque funciona muy lentamente me siento. Lo que quiero hacer es permitir que <li>‘s para moverse libremente en virtud de los <ul>‘s, o moverlos a un nivel. Yo también quiero ser capaz de crear jerarquías, por lo que si usted arrastra un <li> bajo otro <li> que crear una jerarquía. Creo que en ese sentido tendría que representar un <ul> debajo de cada <li> sólo en caso de que. Yo sólo quiero limitar 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>
InformationsquelleAutor Jon | 2009-07-27

4 Comentarios

  1. 40

    Excelente respuesta a esto es

    https://github.com/ilikenwf/nestedSortable

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

    • Es un poco tarde, pero creo que esto podría ser ella! Agradable encontrar!
    • Este ya no se mantiene
    • Parece que alguien tuvo a lo largo del desarrollo.
    • He editado el post para reflejar el nuevo repositorio
  2. 6

    He utilizado JQuery Interfaz plugin que fue fácil para la instalación y trabajó bastante bien para esa tarea (marque la demo), pero yo quería algo más ligero y que no requieren de plugins adicionales.

    Incluso JQuery interfaz de usuario de la biblioteca sortable es una especie de rudimentario todavía puede conseguir de alguna manera que la funcionalidad:

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

    Esto te permitirá ordenar «li» en ninguna «ul» (si recuerdo correctamente). Sin embargo no deja de mover «li» elementos de una «ul» a otro «ul». Incluso es posible hacerlo (cambio de la configuración), me pareció no tan estable y de alguna manera incómodo.

    Se me ocurrió una solución simple: un «botón de bandera», que desactiva la clasificación y activar mueve… y funciona como un encanto! Todo lo que tienes que hacer es seguir la pista de los «li» matriz de identificación de antes y después de moverlo.

    Mis 5 centavos.

    • Ejemplo/fuente de la funcionalidad que se está refiriendo?
  3. 1

    Más probable es que el jQuery interfaz de usuario de la biblioteca puede ordenar que la funcionalidad no se que configurables (es muy rudimentario, para la ordenación de las listas de un nivel de profundidad). Usted sería mejor simplemente usando uno de los árboles plugins que soporte de arrastrar y soltar.

    La interfaz de usuario jQuery árbol widget es en el desarrollo de, pero se puede usar uno de los siguientes plugins:

    http://www.jstree.com/

    http://abeautifulsite.net/notebook/58

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

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

    • Ninguno de los que ofrecen al usuario arrastrar y soltar para crear una jerarquía o diferente orden de los elementos. Quiero que el que se puede ordenar idea, pero con una mayor jerarquía de opciones con la capacidad de guardar en el servidor.
    • Hizo usted echa un vistazo a la función de arrastrar/soltar apoyo en jstree.com ? Parece que tiene lo que usted necesita. Ellos no tienen una demo, aunque. Tendrías que descargarlo y configurarlo usted mismo.

Dejar respuesta

Please enter your comment!
Please enter your name here