2011-02-03 7 views
8

Básicamente usando una estructura de lista, estoy tratando de hacer que cada li clasifique dentro de su propio nivel, pero no dentro de otros niveles. Entonces, si estoy arrastrando hacia abajo Number 1, no se mezclará con ninguno de los sub ul's o li's, pero solo irá por debajo de Number 2. Esto es lo que tengo hasta ahora, y si bien impide que los li vayan POR ENCIMA de su nivel, no impide que los li se mezclen DEBAJO de su nivel. Por ejemplo en este momento me puedo mover Number 1 entre Number 2.1 y Number 2.2jQuery UI: solo permite ordenar dentro de su propio nivel principal, y no por encima ni por debajo de

$(".sortable2, .sortable2 ul").sortable({ 
    opacity: 0.5, 
     stop:function(i){ 
      $.ajax({ 
       type: "GET", 
       url: "?", 
       data: $(this).sortable("serialize") 
      }); 
     } 
}); 



$(".sortable2").selectable(); 
$(".sortable2").disableSelection(); 


$('.sortable2').bind('mousedown', function(e) { 
    e.stopPropagation(); 
}); 

Aquí está la estructura ul li:

<ul class="sortable2"> 
    <li>Number 1 
     <ul class="sortable2"> 
      <li>Number 1.1</li> 
      <li>Number 1.2</li> 
     </ul> 
    <li> 
    <li>Number 2 
     <ul class="sortable2"> 
      <li>Number 2.1</li> 
      <li>Number 2.2 
       <ul class="sortable2"> 
        <li>Number 2.2.1</li> 
        <li>Number 2.2.2</li> 
       </ul> 
      </li> 
     </ul> 
    <li> 
</ul> 

Respuesta

18

Su HTML y selectores son a la vez muy jodido. Lo he limpiado para ti aquí. Tenga en cuenta que debe definir diferentes nombres de clase para los diferentes niveles de ordenables, o al menos asegurarse de que no sean devueltos por el mismo selector. Echa un vistazo a este enlace para una aplicación fija: http://jsfiddle.net/GMUbj/

También podría ajustar los selectores de modo que no tenga que seguir definiendo los nombres de clase y evitar todo este desastre completo, como en: http://jsfiddle.net/HWmz3/

Como se señaló en otra respuesta también puede activar o desactivar esta opción para sublistas individuales con la opción de elementos si desea molestarse en aplicar una clase CSS a todas las listas que desea ordenar (tenga en cuenta que dejé la clase desactivada en la mayoría de los elementos) para que pueda ver cómo funciona): http://jsfiddle.net/DnaBs/

+0

¡Genial! Bien explicado – shadow0359

Cuestiones relacionadas