Andrea Gandino

Qualche giorno fa, mi sono trovato a dover aiutare un amico su come mettere a posto uno script Javascript che implementava un drag&drop; ho pensato dunque che sarebbe potuto essere interessante spiegare i principi base che stanno dietro a detto comportamento.

Innanzitutto, penso sia doveroso cominciare a dire cosa sia un drag&drop e quali siano le sue peculiarità.

Come spesso accade, Wikipedia ci viene in aiuto definendo il drag&drop come segue:

Nell’interfaccia grafica di un computer, il drag and drop indica il cliccare su un oggetto virtuale (quale una finestra o un’icona) e trascinarlo (in inglese:drag) in un’altra posizione, dove viene rilasciato (in inglese:drop).

Tecnicamente, e nel caso specifico delle pagine Web, questa definizione si traduce in quanto segue:

1. Clicco su un oggetto (elemento) della pagina.
2. Tenendo premuto il tasto del mouse, muovo lo stesso mouse.
3. Giunto alla posizione di destinazione, rilascio il tasto.

Andiamo dunque per punti, ad analizzare come si implementa un sistema del genere mediante Javascript.

Primo click sull’oggetto

Dopo essersi posizionati col cursore del mouse sull’oggett che si intende trascinare, eseguiamo un click. Al momento del click, viene attivato il rispettivo evento Javascript, denominato onmousedown, letteralmente tradotto come quando viene premuto il mouse.

A questo evento, associato soltanto all’oggetto che abbiamo cliccato, possiamo associare una funzione, il che equivale a dire che ogni volta che cliccheremo detto oggetto, una porzione di codice da noi stabilita sarà eseguita.

el.onmousedown = seleziona;

Notare come la funzione seleziona sia qui indicata soltanto come reference, e pertanto non ammetta l’indicazione di parametri.

Bene, quello che accade all’interno della funzione seleziona ci interessa relativamente, dal momento che questo articolo non parla di trascinare effettivamente oggetti, nel senso di spostarli da un punto all’altro dello schermo, ma solo di come impostare correttamente quello che sta dietro al drag&drop.

Quello che possiamo dire riguardo alla funzione seleziona, ci porta però al secondo aspetto della faccenda.

Spostamento del mouse

Dopo aver cliccato, si sposta il mouse tenendo premuto il tasto opportuno. Il fatto di muovere il mouse, attiva anche in questo caso un evento particolare chiamato onmousemove.

C’è da dire una cosa riguardo a onmousemove. L’elemento che chiama questo handler può essere alternativamente o un elemento della pagina, o la pagina stessa.

Nel primo caso, l’evento sarà attivo solo nel caso in cui il mouse si sposti all’interno dell’area dell’elemento (per esempio, nel caso di un elemento rettangolare come può essere un div, all’interno dell’area di quel div), mentre nel secondo caso, più generico, l’evento sarà attivo nel caso il mouse si muova all’interno della porzione di schermo che il browser dedica al rendering della pagina.

Nel nostro caso, volendo catturare ogni movimento del mouse, a prescindere da dove esso si trovi, scriviamo:

document.onmousemove = muovi;

che può essere letto come ogni volta che muovi il mouse all’interno della finestra di rendering del browser, fai quello che ti dice la funzione muovi.

Anche in questo caso non ci sofferiamo su cosa effettivamente svolga la funzione muovi.

All’interno della funzione seleziona dobbiamo però anche definire cosa accade al rilascio del mouse, o meglio, definire quale sarà la funzione adibita alle operazioni in concomitanza di quello che è l’evento onmouseup.

Rilascio del mouse

All’interno della funzione seleziona, scriviamo la seguente riga, dal significato che ormai dovrebbe essere chiaro:

document.onmouseup = fine;

Spostandoci nella funzione fine, due sono le cose da fare:

1. “Scollegare” l’evento onmouseup, ovvero dissociarlo dalla funzione fine.
2. Fare la stessa cosa per l’evento onmousemove, per la funzione muovi.

Ovvero:

document.onmouseup = null;
document.onmousemove = null;

Cenni conclusivi

Le funzioni seleziona e muovi, ovvero quelle funzioni che gestiscono le vere operazioni di drag&drop, sono indicate, come abbiamo visto, mediante un semplice riferimento.

Queste funzioni, però, sono lanciate quando un particolare evento viene attivato, sia esso un click, uno spostamento, o un altro tipo di evento. Esse sono così in grado di sapere quale sia stato l’evento che le ha lanciate e di reperire informazioni utili rispetto sia all’evento, sia alla periferica che lo ha attivato (mouse, tastiera).

Tutte queste belle cose, che meriterebbero senz’altro una trattazione più esaustiva, avvengono mediante la variabile e, un oggetto in cui vengono memorizzate tutte le informazioni. Questo oggetto, incidentalmente, viene indicato come parametro al momento di definire la funzione.

Per esempio, se volessimo conoscere le coordinate del mouse al momento del click, basterebbe fare riferimento ai valori e.clientX ed e.clientY, e così via.

Per la solita storiella che noi non viviamo in un mondo ideale, e non è universalmente riconosciuta (qualcuno ha nominato per caso IE?).

Internet Explorer infatti utilizza un’altra variabile per memorizzare le informazioni dell’evento, vale a dire window.event.

Possiamo ovviare a questo problema, scrivendo all’interno delle funzioni sopra citate, quanto segue:

if (!e) var e = window.event;

Per una maggiore completezza, e visto che abbiamo parlato di coordinate, ho preparato un esempio di quanto illustrato in questo articolo, ovvero uno script che traccia le coordinate del mouse solo in presenza di un drag&drop.