Tra i molti plug-in ufficiali offerti da MooTools Drag e Drag.Move sono sicuramenti tra quelli più utilizzati: nel Web 2.0 le applicazioni che permettono di trascinare e spostare gli elementi di una pagina sono davvero molte.
In questa lezione vedremo come rendere un elemento trascinabile (nel gergo "draggabile") e come impostare alcuni parametri per personalizzare l'effetto, tramite la classe Drag.Move. La superclasse Drag (che trovate documentata qui), a differenza di molte altre superclassi, può essere utilzzata molto efficamente anche da sola, ma per ora limitiamoci a sapere che fornisce i metodi e le proprietà fondamentali necessari al corretto funzionamento di Drag.Move.
Semplicemente "drag"
Rendere un elemento draggabile è molto semplice: basta passare al costruttore Drag.Move l'elemento desiderato ed opzionalmente i parametri di personalizzazione:
// rendi il mio elemento trascinabile e limita i suoi movimenti nell'elemento 'main'
var drag = new Drag.Move('myElement', {
container: 'mian'
});
In questo semplice esempio, abbiamo reso l'elemento con id myElement trascinabile dall'utente, nei limiti delle dimensioni dell'elemento container con id main. Ecco la demo in azione.
Drag Events
Vediamo ora un esempio più complesso in cui impostiamo gli eventi per gestire meglio la nostra transizione. Tramite onStart, onDrag e onComplete offerti dalla classe Drag, possiamo infatti controllare ogni fase del dragging:
var myDrag = new Drag.Move('myElement', {
container: 'main',
onStart: function(el){
el.set('html', 'Drag Start!');
},
onComplete: function(el){
el.set('html', 'Drag End!').highlight('#ff0000');
},
onDrag: function(el){
el.set('html', 'Drag is working!');
}
});
Ad ogni determinata fase viene impostato un testo specifico all'elemento. Al completamento del drag, inoltre, viene effetuata una gradevole animazione sul suo colore di sfondo. Potete provare il tutto riunito in questo esempio.
Drag Shortcuts
Esistono due metodi shortctus della classe Element che permettono di rendere i nostri elementi "dimensionabili" e trascinabili utilizzando le funzionalità di Drag e Drag.Move, che prendono rispettivamente i nomi di makeResizable e makeDraggable:
// rendi l'elemento ridimensionabile dall'utente
$('myElement').makeResizable();
// rendi un altro elemento trascinabile tramite Drag.Move
$('myOtherElement').makeDraggable({
container: 'main'
});
Conclusione
In questa lezione abbiamo studiato le caratteristiche di base offerte dalle classi Drag e Drag.Move per rendere i nostri elementi trascinabili. Ma queste ultime offrono davvero molte funzionalità aggiuntive, come la possibilità di creazione di interfacce drag&drop (è presente un grande supporto per i droppables).