Quello che, solitamente, fate sul vostro desktop é il trascinare file o cartelle da una parte all’altra per fare ordine e pulizia oppure per semplici operazioni di routine.
All’interno di una pagina web, lo stesso discorso é applicabile a tutti gli elementi del DOM. Per trascinare oggetti ed elementi con jQuery, si utilizza il plugin Draggable messo a disposizione da jQuery UI.
jQuery UI Draggable plugin consente, in sostanza, di trascinare elementi ed oggetti con varie opzioni a disposizione.
La novità di questo plugin (non é l’unico) sta nel fatto che imposta due classi differenti in relazione allo stato in cui si trova l’elemento :
-
la classe ui-draggable é impostata su tutti gli elementi che sono, potenzialmente, “draggabili” ovvero trascinabili.
-
mentre la classe ui-draggable-dragging é impostata durante il trascinamento ed é aggiunta allo specifico elemento trascinato
Questo consente, come é facile intuire, un’ottima e puntuale personalizzazione dell’evento in base alle specifiche esigenze.
Un esempio é presto fatto :
<script type=”text/javascript”>
$(function() {
$(“#mydiv”).draggable();
});
</script>
<div id=”mydiv”>
<p>Prova a trascinarmi…</p>
</div>
Direi che il codice parla da solo. Interessante, invece, andare oltre e presentare alcune delle più importanti opzioni a disposizione di questo plugin :
– axis : Limita il drag solo orizzontalmente (‘x’) o verticalmente (‘y’).
-> $(“#mydiv”).draggable( {axis:’y’} );
– containment : Delimita l’area in cui l’elemento può essere trascinato ( ‘document’, ‘parent’, ‘window’).
-> $(“#mydiv”).draggable( {axis:’y’, containment: ‘parent’} );
– helper : Si tratta di un elemento di aiuto da mostrare durante il drag. Valori possibili: ‘original’ o ‘clone’. Se impostato su ‘clone’, tanto per afre un esempio, sarà creato un clone dell’oggetto che si sta trascinando e verrà ‘draggato’ proprio quest’ultimo invece dell’elemento originale.
-> $(“#mydiv”).draggable( {helper: ‘clone’} );
– opacity : Opzione che imposta l’opacità dell’helper durante il movimento. Potrebbe essere utilizzato per creare un effetto trasparenza sull’elemento che é trascinato
-> $(“#mydiv”).draggable( {opacity: 0.5} );
In aggiunta a queste opzioni (l’elenco completo lo trovate alla pagina ufficiale del plugin) è possibile associare all’elemento trascinato anche alcune utili funzioni di callback : start, drag e stop. Non è difficile capire come stiano a significare l’inizio, il movimento e il termine dell’azione di drag.
Esempio :
$(“#mydiv”).draggable({
start: function() {
alert(“Si parte…”);
},
drag: function() {
alert(“…siamo in movimento…”);
},
stop: function() {
alert(“…fine drag!”);
}
});
Nel prossimo articolo di questa serie, ovviamente, spazio al plugin Droppable che, logicamente, svolge la funzione di definire il comportamento di un elemento solo quando un altro elemento vi è ‘draggato’ sopra.
