Spostare elementi sullo schermo con jQuery UI Draggable

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.