Ordinare lista con PHP, MySQL e jQuery

DISCLAIMER: questo articolo è stato interamente riscritto!

Quello che vedremo oggi è come ordinare una lista solamente trascinandola.

L'ordinamento verrà anche salvato in tempo reale su db; quello che di cui abbiamo bisogno è di un campo apposito sulla tabella, di AJAX per inviare una richiesta e di jQuery UI (o simili) per l'ordinamento.

Cominciamo quindi da qui; nell'head della pagina:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

A questo punto occupiamoci della pagina.

Prima di tutto ci serve una lista, che di sicuro viene presa da database:

    <ul id="ul_class">
        <?php foreach ($connMod->getClassificazionePerCollezione($coll) as $var): ?>
            <li id="class_<?php echo $var['class_id']; ?>" class="ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                <?php echo $var['class_nome']; ?>
            </li>
        <?php endforeach; ?>
    </ul>

Notate che ogni voce della lista ha un id personalizzato, composto da una parte fissa più l'id preso da db.

In questo modo possiamo serializzarlo e passare i relativi valori a database.

Questo il fulcro di tutto:

 $(function() {
        $("#ul_class").sortable({
            update: function() {
                var order = $("#ul_class").sortable("serialize");
                $.ajax({
                    type: "POST",
                    url: "ajax_ordine_class.php",
                    data: order + "&coll=",
                    success: function(res) {
                        $("#res").html(res);
                    }
                });
            }
        });
        //$("#ul_class").disableSelection();
    });

Usiamo jQuery UI Sortable, e l'evento update.

Ogni volta che spostiamo una voce viene avviato AJAX che passa al file ajax_ordine.php i valori di order.

Questi valori saranno una cosa del genere:

class[]=0&class[]=1&class[]=2....

In pratica ci pensa il serialize a ordinare le voci, assegnargli un valore, e metterle in Query String.

Il PHP non farà altro che connettersi ed eseguire la funzione per l'update:

include_once 'lib/conn.php';

$objAjax = Connessione::getInstance();

foreach ($_POST['class'] as $ordine => $id) {
    // ORDINE + 1 PER NON FARLO COMINCIARE DA ZERO
    $objAjax->upOrdine($ordine + 1, $id);
}

Visto che l'ordine partirebbe da zero, e a me serve da 1, aggiungo un 1 all'ordine.

Per ultimo aggiungiamo un pò di stile non obbligatorio:

#ul_class { list-style-type: none; margin: 0; padding: 0; width: 40%; }
#ul_class li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#ul_class li span { position: absolute; margin-left: -1.3em; }

Direi che siamo a posto!!