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.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
20 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Complimenti, articolo chiaro e molto utile! ;)
Grazie mille Davide!
Bravo mi piace questo articolo… Maurizio ( sta volta non ho sbagliato il nome )
Grazie Rocco; certo che ci vuole tutta a sbagliarsi :-)
Complimenti a Maurizio, l’esposizione è sempre chiara e completa
Gratzie dell’apprezzamento tiziano :-)
Ciao Maurizio,
l’articolo, come sempre, è chiaro e diretto. Ti vorrei chiedere se nella seconda parte del tutorial tu possa spiegare come realizzare il salvataggio dell’ordinamento ancora lato client, magari utilizzando i cookie che mette a disposizione jQuery.
Grazie! :)
Ciao Quirico.
Nella seconda parte mostrerò come salvare l’ordinamento nel database che é, per altro, il caso più comune e forse anche più complesso.
Ma chiaramente, la parte più importante, é capire come “leggere” il nuovo ordinamento. Una volta capito quello, scriverlo nel database piuttosto che in un cookie non dovrebbe essere un problema.
Grazie maurizio, jQuery è sempre delizioso, attendo l’articolo “php” dove le mie lacune sono enormi ^^
Ciao Gleenk.
nonostante le lacune, dovresti riuscire a seguirlo. La parte più laboriosa é capire come individuare il nuovo ordinamento.
Ottimo articolo, Maurizio.
Certo che JQuery è veramente una rivoluzione nel mondo javascript.
Ricordo la fatica, solo pochi anni fa, per ottenere le stesse funzionalità… righe e righe di codice dalle quali, comunque, ottenevi risultati meno “attraenti” come usabilità e look&feel.
Ciao Luca.
Sono assolutamente daccordo con te. Considero jQuery un linguaggio a se (anche se ovviamente é un framework js) che ha permesso un grandissimo salto in avanti.
Non solo é più facile e veloce programmare, ma a mio modo di vedere é anche divertente.
Confesso (mi direte che sono malato) che mi capita di sviluppare dei plugin per jQuery solo ed unicamente per il gusto di farli; per divertimento. Cioé come giocare alla playstation…
Semplice e chiaro.
Questo jquery è veramente una potenza!
Peccato che non ci capisco niente di javascript e questo limita parecchio la possibilità di capire a fondo questo splendido framework.
In ogni caso già fare pratica con il contenuto pubblicato in questi articoli permette di fare delle cose già molto valide per i proprio lavori.
Grazie Maurizio
Ciao luke,
questi articoli sono un po’ avanzati.
Su YIW trovi anche degli articoli di base scritti da Just. Ti consiglio di iniziare da quelli. :-)
Ciao Maurizio.
chiedo aiuto! cerco di richiamare la funzione sortable su due usando delle variabili ma non riesco a uscirne fuori, non ho molta esperienza con jquery e magari è una fesseria :D
in questo modo non ci sono problemi
$( “#lista1, #lista2” ).sortable({
connectWith: “.connected”
}).disableSelection();
al contrario se scrivo così:
$(firstlist, secondlist).sortable({
connectWith: “.connected”
}).disableSelection();
il drag&drop funziona solo dalla prima verso la seconda…
dove sbaglio? Grazie.
sono due , non ho specificato nel commento precedente….
ma le variabili firstlist e secondlist cosa contengono esattamente?
var firstlist = $(“#lista1”);
var secondlist = $(“#lista2”);
sono due unorderd list, come nel demo “connected list” sul sito di jquery ui
Ciao Maurizio, ho risolto in questo modo, funziona perfettamente:
$(firstlist).sortable({
connectWith: [secondlist]
}).disableSelection();;
$(secondlist).sortable({
connectWith: [firstlist]
}).disableSelection();;