Riordinare elementi con jQuery sortable e salvarli con PHP

Vi sarà sicuramente capitato di imbattervi in qualche sito che permetta di riordinare degli elementi all’interno della pagina. Con che scopo? A volte semplicemente estetico, in altri casi, specie se questa funzione viene utilizzata in combinazione con AJAX, PHP e MySQL, diventa un’utile metodo per decidere di cambiare l’ordine di alcuni dati, la disposizione di voci di menù o qualsiasi altra cosa vi passi per la testa.

Attraverso l’utilizzo della funzione .sortable(), e delle sue proprietà handle e update vediamo ora come preparare la nostra pagina per essere riordinata secondo le nostre esigenze e come salvare potenzialmente questo ordine in un database. Per fare tutto ciò ci serviranno: il markup html, il codice css, il codice javascript e due righe di PHP.

Il markup html della lista da riordinare

Senza dimenticarci di scaricare ed includere le libreria jQuery e jQuery UI, procediamo a scrivere il nostro markup prestando attenzione ad alcune cose molto importanti:

<div id="info">In attesa di aggiornamento post-riordinamento</div>
<div id="lista-prova">
	<li id="oggettoItem_1"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 1</strong></li>
	<li id="oggettoItem_2"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 2</strong></li>
	<li id="oggettoItem_3"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 3</strong></li>
	<li id="oggettoItem_4"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 4</strong></li>
</div>

All’interno dell’elemento <pre> (o meglio del div info) mostreremo il risultato dell’operazione eseguita dal nostro file .php.
Per quanto riguarda la lista invece è importantissimo ricordarsi di chiamare l’ID degli elementi che vanno riordinati, usando, in coda del nome, la dicitura Item_1 ecc… dove 1 è il numero dell’elemento. E’ indispensabile perchè tutto funzioni e i dati definiscano correttamente l’array.

E’ altresì indispensabile definire una classe unica per gli elementi che dovranno essere fisicamente trascinabili. Nel nostro caso saranno le immaginette 48×48 pixel.

Il codice CSS, libera la tua fantasia

Per quanto riguarda il codice css non c’è alcun vincolo o nota particolare da fare. Potete liberamente sbizzarrirvi ricordandovi, tra l’altro, che non è necessario utilizzare una lista, ma che gli elementi da riordinare siano inclusi in un contenitore unico che targetizzeremo via javascript.
Ad ogni modo, se non avete voglia di scrivere tutto da zero, potete scaricare direttamente i files usati nell’esempio da qui:

Il codice jQuery e la funzione .sortable()

Il codice che si occupa di svolgere tutto il lavoro è concentrato in poche righe:

$(document).ready(function() {
    $("#lista-prova").sortable({
      handle : '.trascinabile',
      update : function () { 
		var ordina = $('#lista-prova').sortable('serialize');
  		$("#info").load("riordinamento.php?"+ordina);
      }
    });
});

1. Quando la pagina è caricata definiamo l’ordine attuale degli elementi da riordinare dentro al contenitore chiamato #lista-prova. Quindi come prima operazione salviamo l’ordine degli elementi contenuti dentro a lista-prova.
2. Attraverso la proprietà handle definiamo con la classe .trascinabile quali sono gli elementi trascinabili (nel nostro caso le immagini).
3. Procediamo poi aggiornando l’ordine degli elementi dopo averli trascinati ed eseguendo una callback che faccia il resto.
4. Per concludere salviamo una variabile (ordina) che contiene l’array con il nuovo ordine degli elementi ed inviamo in GET questo valore alla pagina riordinamento.php usando la funzione load(), per l’utilizzo della quale vi rimando a questo articolo.

Se provate a fare un alert() della variabile “ordina” vedrete come venga prodotto come output un array vero e proprio.

Lo script PHP e l’invio di dati ad un database MySQL

Il valore dell’array inviato arriverà alla nostra pagina PHP:

<?php
foreach ($_GET['oggettoItem'] as $position => $item) :
	$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
endforeach;
 
print_r ($sql);
?>

Nell’esempio il procedimento è solo ipotizzato ma, come possiamo vedere, non facciamo altro che estrarre i 4 elementi dell’array, spedito con la funzione .load(), attraverso un ciclo foreach ed inserire il nuovo valore (la nuova posizione quindi) nel database. In conclusione stampiamo l’array aggiornato usando la funzione print_r(). Nel nostro esempio sarà questo l’unico output che avremo e che quindi verrà ripassato in AJAX alla nostra funzione jQuery e che ci permetterà quindi di stampare dentro al div indo il risultato delle nostre operazioni.
Non vi resta che sperimentare!

Per una dimostrazione pratica e scaricare gratuitamente i files utilizzati nella spiegazione: