Reordenar lista mediante mootools con Javascript

Estoy empezando a curiosear Mootools , y aunque me está gustando bastante, si que echo en falta una documentación más detallada, no solo explicar como va el API, ya que a veces son necesarios ejemplos más básicos para no tener que estar buscando en el API.

En este caso voy a reorganizar mediante drag&drop una lista de elementos, la cual puede tener subelementos también, un típico ejemplo de categorías y subcategorías. Para ello me crearé una lista cuyos elementos tendrán el estilo categoria y cuyos subelementos tendrán el estilo subcategorias , necesario para diferenciar estilos y comportamiento.

1. <ul id="lista_categorias"> 
2.   <li class="categoria">Elemento 1</li>  
3.   <li class="categoria">Elemento 2 
4. <ul> 
5.   <li class="subcategoria">Elemento 2.1</li>  
6.   <li class="subcategoria">Elemento 2.2</li>  
7.   <li class="subcategoria">Elemento 2.3</li>  
8.   <li class="subcategoria">Elemento 2.4</li>  
9.   <li class="subcategoria">Elemento 2.5</li>  
10.   <li class="subcategoria">Elemento 2.6</li>  
11. </ul> 
12.   </li>  
13.   <li class="categoria">Elemento 3</li>  
14.   <li class="categoria">Elemento 4 
15. <ul> 
16.   <li class="subcategoria">Elemento 4.1</li>  
17.   <li class="subcategoria">Elemento 4.2</li>  
18.   <li class="subcategoria">Elemento 4.3</li>  
19.   <li class="subcategoria">Elemento 4.4</li>  
20. </ul> 
21.   </li>  
22.   <li class="categoria">Elemento 5</li>  
23.   <li class="categoria">Elemento 6</li>  
24.   <li class="categoria">Elemento 7</li>  
25.   <li class="categoria">Elemento 8</li>  
26.   <li class="categoria">Elemento 9</li>  
27. </ul> 

Para ser lo menos intrusivo que se pueda, anadiré al evento load del objeto window la carga de las funciones necesarias para ello, siempre que exista el objeto lista_categorias (el primer ul de todos).

1. window.addEventListener('load', function() { 
2. _lista(); 
3.   } 
4. , false); 
6. function _lista() { 
7.   if ($('lista_categorias')) { 
8. ... 
9. } 

Usuarios que han visto este tema también han visto...

- Contador de dias online con JavaScript
- Establecer conexiones al puerto Http con el objeto XMLHttp
- Fecha y hora en JavaScript
- Imagen de la semana con link en Javascript
- Cuenta atrás en Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento