Drag&drop con MooTools

Con questo articolo si conclude il ciclo di tutorial dedicati alla versione 1.1 di MooTools: dal prossimo si affronteranno le nuove funzionalità offerte dalle versione 1.2 che è ormai una realtà molto vicina.

Tutti i concetti e le regole presentate finora in questa raccolta costituiscono una solida base per affrontare i nuovi strumenti offerti dalla futura release, i cui cambiamenti maggiori si riscontrano nella sintassi generale e nelle nuove funzionalità, progettate appositamente per migliorare ogni aspetto della versione 1.1.

Non si deve temere quindi un cambiamento drastico che avrebbe azzerato ciò che è stato appreso con la lettura dei precedenti articoli. Per fare un esempio veloce, ora con MooTools è possibile estendere le classi nel seguente (e più elegante) modo:

	var Sub = new Class({
		
		Extends: Super,
		
		initialize: function() {
			// start
		}
	});
	

invece che:

	var Sub = Super.extend({
	
		initialize: function() {
			// start
		}
	
	});
	

Il metodo extend degli oggetti Class è stato deprecato in favore della proprietà Extends, ma allo sviluppatore giunge solamente come un cambiamento sintattico: i concetti appresi sull’ereditarietà delle classi e sui relativi vantaggi sono rimasti intatti, ma con la certezza che le meccaniche del framework sono state internamente migliorate.

Dedicheremo comunque in futuro un’ampia parte alla compatibilità e a quelli che sono i maggiori e più importanti cambiamenti.

Ma torniamo alla versione 1.1. In questo articolo, tra i componenti più efficaci che non sono ancora stati descritti, ho deciso di trattare i file Drag.Base e Drag.Move. Questi permettono le cosiddette operazioni di “dragging”, che sono molto utili e diffuse all’interno delle applicazioni di nuova generazione.

Drag

Nel gergo informatico un elemento “draggabile” è un elemento trascinabile con il mouse all’interno della finestra o di un determinato elemento contenitore. Il tipo di applicazione più diffusa che ha preso vita da questa funzionalità è sicuramente il “carrello della spesa virtuale”, dove è appunto possibile trascinare i prodotti desiderati all’interno di un carrello virtuale oppure rimuoverli.

Per rendere un elemento trascinabile con l’elegante sintassi Object Oriented di MooTools è sufficiente dichiarare un’istanza della classe Drag.Base o della classe avanzata Drag.Move, e impostare tutte le opzioni desiderate per personalizzare e potenziare la semplice operazione di trascinamento.

Negli esempi successivi utilizzeremo unicamente il costruttore Drag.Move, ma per sfruttare al meglio tutte le sue caratteristiche dedichiamo come di consueto una parte teorica relativa a tutti gli strumenti offerti dalla classe base da cui eredita.

Drag.Base

Questo costruttore, che necessita di un doctype XHTML, si aspetta due argomenti: l’elemento su cui applicare l’effetto e le opzioni di personalizzazione. Vediamole:

• handle: l’elemento che funge da gestore del trascinamento. Di default è l’elemento stesso;
• modifiers: un oggetto con proprietà x e y rappresentanti le proprietà CSS dell’elemento che vengono alterate quando il mouse si muove rispettivamente in direzione orizzontale e verticale. Di default sono impostate a ‘left’ e ‘top’ (ad esempio, con il metodo makeResizable, vengono modificate rispettivamente ‘width’ ed ‘height’ per ridimensionare l’elemento);
• grid: distanza in px relativa all’opzione snap;
• snap: la distanza che occorre percorrere con il mouse prima che il drag venga azionato (definita in combinazione con l’opzione grid). Di default è false (non occorre percorrere nessuna distanza aggiuntiva. Se impostato a true viene preso in considerazione il valore di grid);
• limit: un oggetto con proprietà x e y, che sono array con due valori che rappresentano i limiti entro cui è possibile l’operazione di dragging;
• onStart: funzione da eseguire quando si inzia l’operazione di dragging;
• onComplete: funziona da eseguire quando l’utene rilascia l’elemento;
• onDrag: funzione da eseguire quando l’elemento viene trascinato, ovvero quando è in corso l’operazione di dragging.

Con il file Drag.Base.js, oltre all’oggetto Drag.Base, è presente un’estensione del costruttore Element sotto forma di un metodo chiamato makeResizable che permette di ridimensionare un elemento quando l’utente trascina il mouse, proprio come accade comunemente nelle applicazioni desktop. Questa funzione accetta un argomento options che rappresenta le opzioni della classe Drag.Base. Vediamo un esempio:

	// l'elemento 'myElement' sarà ridimensionabile
	$('myElement').makeResizable({
		onComplete: function() {
			alert('Resize complete');
		}
	});
	

Drag.Move

Anche il costruttore Drag.Move accetta due argomenti: l’elemento al quale viene applicato il dragging e le opzioni. Esso estende Drag.Base e quindi eredita tutte le opzioni definite sopra. In più, aggiunge le seguenti, per effettuare operazioni di dragging avanzato:

• container: un riferimento ad elemento che automaticamente imposta i limiti entro i quali è consentito il dragging. Di default è false;
• droppables: un array di elementi su cui è possibile trascinare l’elemento sottoposto al dragging per creare applicazioni drag&drop;
• overflown: un array di elementi annidati che possono assumere valori di scrolling quando si trascina l’elemento (vedere il metodo Element.getPosition).

Oltre alla classe Drag.Move, il file Drag.Move.js ci offre il metodo makeDraggable del costruttore Element, che rappresenta una scorciatoia al costruttore e che restituisce una sua istanza applicata all’elemento con cui viene richiamato.

Primo esempio: Drag Events

Ora che abbiamo analizzato le opzioni e i metodi che i file Drag.Base.js e Drag.Move.js ci mettono a disposizione, è tempo di mettere in pratica quanto abbiamo detto. Per questo ho creato due esempi pratici. Nel primo viene mostrato come impostare gli eventi che vengono azionati rispettivamente all’inzio, durante e al completamento del dragging. Nell’esempio viene modificato il testo che compare nell’elemento e il suo colore, ma ovviamente è possibile compiere operazioni molto interessanti.

Ecco il codice:

	var drag = new Drag.Move('box', {
		onStart: function() {
			this.element.setStyle('color', 'red').setHTML('Start drag me!');
		},
		onDrag: function() {
			this.element.setStyle('color', 'blue').setHTML('You are dragging me!');
		},
		onComplete: function() {
			this.element.setStyle('color', 'green').setHTML('You have dragged me!');
		},
	});
	

Codice HTML:

	<div id="box">
		<b>Drag Me!</b>
	</div>
	

Secondo esempio: Drag&Drop

In questo secondo esempio ho creato una semplice applicazione di drag&drop in cui è possibile trascinare l’elemento all’interno di un contenitore che cambierà colore e testo a seconda dell’evento che verrà azionato. È infatti possibile settare gli eventi personalizzati over, leave e drop al contenitore definito con l’opzione droppables, e questi verranno azionati rispettivamente quando l’elemento draggabile viene trascinato al di sopra , viene trascinato al di fuori oppure viene rilasciato al suo interno.

Inoltre, è stato impostato come limite per il dragging l’elemento “wrapper”: non sarà possibile trascinare il nostro elemento al di fuori di esso.

Vediamo il codice:

	var drop = $('drop');
	
	var drag = new Drag.Move('box', {
		droppables: $$('#drop'),
		container: $('wrapper')
	});
	
	drop.addEvent('over', function(){
		this.setHTML('Over!').setStyle('background-color', '#000000');
	});
	 
	drop.addEvent('leave', function(){
		this.setHTML('Leave!').setStyle('background-color', '#FF9966');
	});
	 
	drop.addEvent('drop', function(){
		this.setStyle('background-color', 'red').setHTML('Drop!');
	});
	

Codice HTML:

	<div id="wrapper">
	<div id="box">
		<b>Drag Me!</b>
	</div>
	
	<div id="drop"></div>
	</div>
	

Ricordo infine che è necessario posizionare entrambi i codici sopra riportati all’interno dell’evento domready, come sempre.

Ecco entrambe le applicazioni sono pronte per il download.

Altri esempi

Nella sezione demo del sito ufficiale è possibile trovare tre esempi che mettono in mostra altre caratteristiche interessanti: Drag.Absolutely, Drag.Cart e DragDrop .

Conclusione

In questo ultimo tutorial dedicato a MooTools 1.1 abbiamo analizzato le potenzialità delle classi Drag.Base e Drag.Move, per creare applicazioni complesse e personalizzate di dragging e drag&drop. Come al solito, il framework ci offre tutti gli strumenti necessari basati sulle solide sintassi degli oggetti Class e sui concetti di ereditarietà affrontati nei precedenti articoli.

Nella prossima release anche i componenti Drag verranno ulteriormente potenziati e migliorati.

Alla prossima con le novità sulla versione 1.2 di MooTools!