Ordinare elementi con jquery sortable e salvarli su database mysql con php

Può capitare che nel vostro sito web, soprattutto per quanto riguarda le sezioni di back office (amministrazione del sito), dobbiate utilizzare un sistema per riordinare degli elementi; un metodo cioè che vi consenta di specificare, mediante il semplice spostamento di un oggetto, l’ordine dello stesso.

Nel mio caso, utilizzerò jQuery sortable per ordinare delle immagini  e salvare l’ordine delle stesse nel modo in cui preferisco.

Come sempre, ricordatevi di creare il riferimento a jQuery e jQueryUI.

Per vostra comodità vi riporto anche i siti di ciascuno:

• jQuery (www.jquery.com)
• jQueryUI (www.jqueryui.com)

Nel nostro codice invece dovremo inserire quanto segue:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

A questo punto iniziamo a vedere la pagina HTML vera e propria

<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- CSS -->
 

</pre>
<div align="center">
<div id="informazioneAttuale">STATO: attesa aggiornamento ordine!</div>
<div id="lista-oggetti"><?
require('../lib/globalClass.php');
$db = new GlobalClass();
$db->Database();
$result = $db->freeQuery("SELECT * FROM tabella_nomi WHERE nome like 'A%' ORDER BY ordine ASC");
if($result){
foreach($result as $val){
?>
<ul>
	<li id="oggettoItem_<?= $val['idNome']; ?>"><img class="trascina" src="img/<?= $val['file']; ?>" alt="" width="250" /><!--?= $val['nome']; ?--></li>
</ul>
<?
} // chiudo foreach
}
?></div>
</div>
<pre>

Nel codice di esempio faccio riferimento alla tabella “tabella_nomi” utilizzata nell’articolo relativo all’autocomplete di un campo input in un form ed ho utilizzato la classe PHP per la gestione di un database MySql

Adesso vediamo il codice jQuery da includere nel file HTML.

<!-- SCRIPT -->
<script>// <![CDATA[
 $(document).ready(function() {
 $("#lista-oggetti").sortable({
 handle : '.trascina',
 update : function () {
 var newOrdine = $('#lista-oggetti').sortable('serialize');
 $("#informazioneAttuale").load("aggiornaDatabaseSortable.php?"+newOrdine);
 }
 });
 });
// ]]></script>

Arrivati a questo punto non ci rimane altro che definire i CSS. Per quanto riguarda lo style da abbinare a questo pratico modo di ordinare gli oggetti, l’unico limite che avete è la vostra fantasia (e bravura). Per comodità mi servirò del seguente CSS che includerò direttamente nella pagina

A questo punto i vostri elementi saranno già “sortable” ma non saranno salvati. Infatti, nel codice che segue illustrerò il codice relativo alla pagina PHP per il salvataggio (automatico) dell’ordine degli elementi. Il file in questione sarà chiamato aggiornaDatabaseSortable.php

Ecco quindi il codice del file PHP

<!--?php <br ?-->/**
 * Created by Jonathan Domenici - www.jonathandomenici.com
 * Date: 17/09/13
 * Time: 19:23
 */
require('../lib/globalClass.php');
$db = new GlobalClass;
$db->Database();

foreach ($_GET['oggettoItem'] as $posizione => $oggetto) :
 $update = array("ordine" => $posizione);
 $where = array("idNome" => $oggetto);
 $db->updateQuery('tabella_nomi',$update,$where);
endforeach;

print_r ('Ordine Aggiornato!');
?>

Anche in questo caso utilizzo la mia classe per la gestione di un database

Infine eccovi tutto il codice per intero della pagina:

<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- CSS -->

<!-- SCRIPT -->
<script>// <![CDATA[
 $(document).ready(function() {
 $("#lista-oggetti").sortable({
 handle : '.trascina',
 update : function () {
 var newOrdine = $('#lista-oggetti').sortable('serialize');
 $("#informazioneAttuale").load("aggiornaDatabaseSortable.php?"+newOrdine);
 }
 });
 });
// ]]></script>

</pre>
<div align="center">
<div id="informazioneAttuale">STATO: attesa aggiornamento ordine!</div>
<div id="lista-oggetti"><?
require('../lib/globalClass.php');
$db = new GlobalClass();
$db->Database();
$result = $db->freeQuery("SELECT * FROM tabella_nomi WHERE nome like 'A%' ORDER BY ordine ASC");
if($result){
foreach($result as $val){
?>
<ul>
	<li id="oggettoItem_<?= $val['idNome']; ?>"><img class="trascina" src="img/<?= $val['file']; ?>" alt="" width="250" /><!--?= $val['nome']; ?--></li>
</ul>
<?
} // chiudo foreach
}
?></div>
</div>
<pre>

Alcune precisazioni:

L’ordine con la quale vengono ordinati gli oggetti parte dal numero 0. In questo modo (ed in particolare in questo esempio), ordinando 5 oggetti, l’ordine che troverete sul vostro database sarà: 0,1,2,3,4 e non 1,2,3,4,5.

L’aggiornamento automatico dell’ordine dei vostri oggetti è reso possibile grazie alla funzione di jQuery “.load” della quale vi riporto il link direttamente al sito jQuery (http://api.jquery.com/load/) e che, spero non fra molto tempo, riuscirò a descrivere per bene in un articolo del mio blog.

Per vedere lo script in azione, puoi visualizzare la DEMO di questo articolo

Per il codice sorgente del progetto o se non vi è chiaro qualche cosa, o se volete semplicemente dirmi grazie, mandate un commento oppure un’email al mio indirizzo jonathan[at]jonathandomenici.com

Infine, voglio precisare una cosa molto importante. E’ ormai molto tempo che utilizzo una classe come questa (ripeto, l’ho modificata molto nel tempo, ma questa è una versione molto base). Questo codice è quindi frutto di ricerche, nottate insonni davanti al PC e duro lavoro. Sicuramente, qualche parte o porzione di codice è stata presa in giro per la rete. Specifico questo in quanto non voglio assolutamente attribuirmi ne il merito, ne la proprietà intellettuale di questo codice sorgente. Anzi, con molta probabilità, alcune parti, saranno utilizzabili solo e soltanto mediante la FREE GNU GENERAL PUBLIC LICENSE  consultabile a questo indirizzo: http://www.gnu.org/licenses/gpl.html