JavaScript  »  Articoli  »  MooTools 

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!');
	});
	

	<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!

Altri articoli

Altre guide

Altre newsletter