MICHELEPISANI.IT

jQuery UI: guida all'uso delle interazioni

'Drag and Drop' per muovere liberamente elementi a video

Spostare elementi sullo schermo con jQuery UI Draggable

Febbraio 12
07:132015

Trascinare elementi sullo schermo può trovare applicazione in diversi contesti web, basti pensare ad esempio alla disposizione degli stessi su una scrivania virtuale, ed il metodo "draggable" della libreria jQuery UI ci agevola notevolmente il lavoro. Assegnando il metodo ad un elemento del DOM questo assumerà la capacità di essere trascinabile, potendolo così muovere come se fosse un vero e proprio oggetto semplicemente cliccandoci sopra con il mouse e spostandosi all'interno della finestra.

Per prima cosa la nostra pagina dovrà inludere le librerie jQuery e jQuery UI tra i tag script nell'head (quelle elencate di seguito assicurano il corretto funzionamento del codice di esempio):

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

E' necessario creare un elemento a cui associare la funzionalità, nel caso specifico utilizzo un'immagine (che per semplicità creo dinamicamente tramite un apposito servizio) ma può essere qualsiasi elemento del DOM:

<img class="element" src="http://dummyimage.com/150x150/000/ffffff&text=Spostami" />

Un po' di CSS per definirne le dimensioni e far cambiare il puntatore del mouse quando ci troviamo sopra l'elemento:

.element {height:100px;width:100px;}
.element:hover {cursor:move}

Ed infine il fulcro della questione, l'assegnazione del metodo all'elemento. Nel codice di esempio faccio uso di 2 eventi relativi al widget "draggable", nello specifico start e stop, che gestiscono funzioni rispettivamente nel momento in cui inizio il trascinamento dell'oggetto e in quello in cui lo rilascio. In questo caso faccio in modo che l'elemento si ingrandisca quando sollecitato e ritorni alle sue dimensioni originali quando rilasciato:

$(".element").draggable({
    start: function() {
        $(this).height(175).width(175);
    },
    stop: function() {
        $(this).height(100).width(100);        
    }
});


Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":



Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget draggable sul sito di jQueryUI.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

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

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …