Come ordinare elementi con jQuery (1/2)

In questo articolo tratteremo l’affascinante e sempre più utilizzata tecnica dell’ordinamento di oggetti in un documento html. Il classico esempio potrebbe essere la gestione dei widget di WordPress.
Per attivare un widget lo dobbiamo trascinare nella sidebar tramite un operazione di drag and drop così come descritta in questo articolo. Per deciderne l’ordine nel quale dovrà apparire lo potrò trascinare (in alto o in basso) fino a raggiungere la posizione desiderata.

Anche quest’ultima procedura in fondo è un drag and drop, ma è un caso così particolare che jQuery ci mette a disposizione un metodo specifico che come sempre ci farà risparmiare molto tempo, ovvero il metodo sortable().
Questo metodo applicato ad un gruppo di elementi, li rende ordinabili come in questo esempio. Vediamo subito come.

Iniziamo con il creare la pagina index.php in questo modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Ordinamento con jQuery | Your Inspiration Web</title>
</head>
<body>
    <ul id="list">
        <li id="item_1">Elemento 1</li>
        <li id="item_2">Elemento 2</li>
        <li id="item_3">Elemento 3</li>
        <li id="item_4">Elemento 4</li>
        <li id="item_5">Elemento 5</li>
    </ul>
</body>
</html>

Nota il formato dell’id degli elementi della lista. E’ importante che sia così (nomeSempreUguale_numeroSempreDiverso) e vedremo perché nel prossimo articolo.
Ora creiamo il foglio di stile screen.css e definiamo alcune classi:

ul{
    list-style-type: none;
}

li.item{
    border: 1px solid black;
    padding: 15px;
    width: 250px;
    margin-bottom: 10px;
    background-color: #E1E1E1;
    cursor: move;
}

Abbiamo semplicemente definito la lista in modo che appaia come una serie di blocchi. Inoltre il cursose del mouse è stato ridefinito in modo che sia immediatamente chiaro che questi blocchi possono essere spostati (usabilità).

Ora iniziamo con il collegare questo foglio di stile nell’header di index.php:

<link href="screen.css" rel="stylesheet" type="text/css" />

A questo punto richiamiamo le librerie necessarie che sono jQuery, ui.core, ui.widget, ui.mouse e naturalmente ui.sortable

<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>

Vorrei fare un piccolo inciso. Nella realtà non si farebbe mai in questo modo, cioè includere tutte le librerie necessarie una per una; in questo articolo lo facciamo solo per scopo didattico).
Devi sapere che i ragazzi del team di jQuery sono così gentili da crearci un file personalizzato a dipendenza delle nostre esigenze. Se infatti vai nell’area di download delle user interface di jQuery puoi notare che tutti i plugin sono selezionati. Cliccando su “deselect all components” e selezionando solo sortable, viene selezionato sortable e le dipendenze necessarie.
Ora, cliccando su download potrai scaricare il tuo pacchetto personalizzato. Nella cartella js troverai jQuery (ultima versione) compresso ed un file chiamato jquery-ui-xxx-custom-min.js che altro non è che il plugin che ti serve con integrate tutte le dipendenze (anche questo compresso). Non ti serve altro.

Detto questo possiamo continuare definendo la funzione jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        //Qui scriveremo il codice jQuery
    });

A questo punto la nostra pagina index.php dovrebbe essere così:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>
    <link href="screen.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function(){
            //qui scriveremo il codice jQuery
        });
    </script>
    <title>Ordinamento con jQuery | Your Inspiration Web</title>
</head>
<body>
    <div id="container">
        <ul id="list">
            <li id="item_1">Elemento 1</li>
            <li id="item_2">Elemento 2</li>
            <li id="item_3">Elemento 3</li>
            <li id="item_4">Elemento 4</li>
            <li id="item_5">Elemento 5</li>
        </ul>
    </div>
</body>
</html>

Bene, a questo punto dovremo unicamente applicare il metodo sortable all’elenco #list. In questo modo:

$("#list").sortable();

Come vedi gli elementi sono ora ordinabili.

Aggiungiamo qualche parametro

Come nel drag and droop anche il metodo sortable ci fornisce il parametro axsis in modo da vincolare il movimento su un unico asse. Nel nostro caso, vincoleremo il movimento unicamente all’asse y, in questo modo:

$("#list").sortable({
    axis: "y"
});

Inoltre risulta abbastanza carino che durante il trascinamento, l’elemento trascinato diventi opaco. Per fare questo, sortable ci mette a disposizione il parametro opacity, che imposteremo su 0.5.


$("#list").sortable({
    opacity:0.5,
    axis: "y"
});

Conclusione

In questo articolo abbiamo visto con quale semplicità jQuery ci permette di implementare delle funzionalità di ordinamento. Ma… c’è un ma.
Così è solo un simpatico giochetto e serve a poco. Infatti il nostro ordinamento ha luogo esclusivamente lato client, nel nostro browser. Se ricarichiamo la pagina, gli elementi saranno ordinati così come lo erano all’inizio. Ma allora come si fa a intercettare il nuovo ordinamento e soprattutto a renderlo definitivo?
Questo sarà l’argomento del prossimo articolo che risulterà inevitabilmente un po’ più complesso. Infatti dovremo appunto intercettare il nuovo ordinamento ed inviarlo al server in modo da poterlo registrare; dunque ci sarà bisogno di PHP e MySql. Ma questo già lo sapevi.
Conserva i file realizzati fino ad ora visto che partiremo da qui.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

20 commenti

  1. Davide
  2. tiziano
  3. Quirico
  4. luke
  5. Alessandro
  6. Alessandro
  7. Alessandro
  8. Alessandro
  9. Alessandro

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *