jQuery

Draggable : trascinare oggetti ed elementi con jQuery

jQuery

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.

Draggable : trascinare oggetti ed elementi con jQuery
Vota questo articolo

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.