Reordenar lista mediante mootools con Javascript (2)

Habrá tres operaciones distintas: crear efecto drag, añadir evento drop a las categorías y añadir evento drop a las subcategorías. Digo crear efecto drag porque realmente lo que se hace es que cuando se ejecuta el evento mousedown , se crea una copia del elemento, y es este el que se mueve por la pantalla, guardando una referencia al elemento original. Hay distinción entre el evento drop de las categorías y las subcategorías porque si se trata de una categoría se añade sin más, y si es una subcategoría se añade en la categoría. A parte, si se intenta mover una categoría que contiene subcategorías, solo se añadirán las subcategorías, no la categoría.

1. // Drag & Drop de listado
2. function _lista() { 
3.   if ($('lista_categorias')) { 
4. // Drag de cada categoria/subcategoria
6. // Para cada elemento li añado el evento mousedown, para que cuando se ejecute se cree una copia de ese elemento, se le de estilo semi transparente y se permita hacer drag
7. $$('#lista_categorias li').each(function(elemento){ 
8.   elemento.addEvent('mousedown', function(e) { 
9. e = new Event(e).stop(); 
10. window.item = elemento; 
11. window.categoria_clone = this.clone() 
12. .setStyles(this.getCoordinates()) 
13. .setStyles({'opacity': 0.7, 'position': 'absolute'}) 
14. .addEvent('drop', function() {console.log('DROP')}) 
15. .addEvent('emptydrop', function() { 
16. this.remove(); 
17. }).inject(document.body); 
19. categoria_clone.makeDraggable({ 
20.    droppables: $$('#lista_categorias li') 
21. }).start(e); 
22.   }); 
24. }); 
26. // Drop en las categorias
28. // Para cada categoria, le añadimos el evento drop, que permite recibir elementos "drag". Si el elemento que se recibe tiene subcategorias, entonces se cogen estas y se añaden al elemento ul que contiene, si no lo contiene, lo creamos. Si no contiene subcategorías, se añade sin más.
29. $$('#lista_categorias li.categoria').each(function(drop){ 
30.   drop.addEvents({ 
31.   'drop': function() { 
32.   window.categoria_clone.remove(); 
33.   var ul = window.item.getElement('ul'); 
34.   if (!drop.getElement('ul')) { 
35. (new Element('ul')).inject(drop); 
36.   } 
37.   dropul = drop.getElement('ul');  
38.   if (ul) { 
39. ul.getElements('li').each(function(li) { 
40.   li.inject(dropul);  
41. }); 
42. ul.remove(); 
43.   } else { 
44. window.item.inject(dropul); 
45.   } 
46.  drop.setStyle('background', '#FFFFFF'); 
47. //dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
48.   }, 
49.   'over': function() { 
50.  drop.setStyle('background', '#DDDDFF'); 
51. //dropFx.start('98B5C1');
52.   }, 
53.   'leave': function() { 
54.  drop.setStyle('background', '#FFFFFF'); 
55. // window.categoria_clone.remove();
56. //dropFx.start('ffffff');
57. } 
58.   }) 
59. }); 
61. // Si cae el drop en una subcategoria lo inserto en el padre
62. $$('#lista_categorias li.subcategoria').each(function(drop){ 
63.   drop.addEvents({ 
64.   'drop': function() { 
65.   window.categoria_clone.remove(); 
66.   var ul = window.item.getElement('ul'); 
67.   dropul = drop.parentNode;  
68.   if (ul) { 
69. ul.getElements('li').each(function(li) { 
70.   li.inject(dropul);  
71. }); 
72. ul.remove(); 
73.   } else { 
74. window.item.inject(dropul); 
75.   } 
76.   } 
77.   }) 
78.   }); 
80.   } 
81. } 

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

- Función removeChild en Javascript
- Etiqueta desplazándose por el explorador en JavaScript
- El for en JavaScript
- Reloj Sigue al cursor en Javascript
- Las funciones trigonométricas en Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento