jQuery italia

Drag Stampa E-mail
Pagina 1 di 2

 

Questo plugin delle jQuery UI permette di trascinare un elemento tramite l'utilizzo del mouse.

La classe che questi elementi prendono è ui-draggable. Quando invece comincia l'azione di drag viene aggiunta un'ulteriore classe, ui-draggable-dragging, che viene rimossa non appena l'oggetto ritorna in fase stazionaria.

La creazione di questo plugin è molto semplice e necessità di una sola istruzione, che però è ampiamente personalizzabile tramite diversi parametri.

Vediamo ora un esempio di questo plugin e il suo semplice codice:

 

$("#div_drag").draggable();


CLICCA QUI E MUOVIMI !!!



Il plugin può essere personalizzato in diversi modi e tramite diversi parametri: eventi, metodi ed opzioni generali.
Affronteremo queste tre metodologie di personalizzare il plugin tramite una descrizione.



Eventi

Cominciamo con il trattare gli eventi relativi a questo plugin, che riguarderanno ovviamente le fasi del movimento dell'elemento.
L'utilità di questi eventi sta nell'associare una funzione al determinato evento, la quale è eseguita ad ogni movimento effettuato.

 

Start

Qusto evento viene chiamato quando si comincia a muovere l'elemento in questione.
Possiamo quindi legare a questo evento una funzione a nostro piacere, oppure utilizzare il metodo ".bind()" per legare la funzione al relativo tipo, in questo caso "dragstart".
Ecco il codice di esempio di entrambi i casi:

 

$('#id').draggable({
start: function(event, ui) { ... } //la funzione si avvia quando comincia il movimento
});


$('#id').bind('dragstart', function(event, ui) { //vengono legati l'evento start con il tipo dragstart
...
});

Drag

Questo evento invece ha inizio quando l'oggetto è in movimento, cioè quando effettivamente il mouse si sta muovendo.
Anche qui come per l'evento precedente possiamo avere i due casi di utilizzo e la sintassi è analoga:

 

$('#id').draggable({
drag: function(event, ui) { ... }
});


$('#id').bind('drag', function(event, ui) {
  ...
});

 

Stop

Ovviamente questo evento viene attivato, come si deduce dal nome, quando l'azione di spostamEnaento termina.
Anche qui la sintassi è analoga alla precedente:

 

$('#id').draggable({
   stop: function(event, ui) { ... }
});


$('#id').bind('dragstop', function(event, ui) {
  ...
});



Conoscendo questi eventi sta ora all'utente cercare la più opportuna funzione da eseguire all'attivazione del metodo desiderato.

 

 


<< Inizio < Prec. 1 2 Succ. > Fine >>
 

Chi è online

 4 visitatori online

Sondaggi

Che cosa pensi della grafica di questo sito ?