Il est toujours compliqué de proposer au internautes de trier des éléments et faire ça de manière simple et ergonomique. On peut, par exemple, proposer de saisir la position pour chaque élément. Mais ça reste contraignant.
C’est dans cette optique qu’apparaît l’option du drag’n'drop (glisser-déposer en français). Je pense que c’est ce qu’il y a de plus simple et intuitif pour l’internaute. Il faut néanmoins le prévenir que l’on attend un glisser-déposer de sa part car ce n’est pas encore répandu absolument partout !
Voir la démo du tutorial
Pour réaliser cela, JQueryUI nous propose le widget nommé Sortable. Il permet de créer et de configurer le drag’n'drop pour une liste d’éléments. Pour commencer, il faut donc inclure : JQuery et JQueryUI (javascript et CSS).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" /> <script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
Pour sauvegarder le tri fait par l’internaute, il faut enregistrer le tout dans la base de données. Je te fournis donc celle utilisée dans la démo. Où chauqe élément à un id unique, name contient le nom du fichier de la photo et position pour enregistrer l’ordre des photos.
-- -- Structure de la table `demo_photo` -- CREATE TABLE `demo_photo` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) collate latin1_german2_ci NOT NULL, `position` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `order` (`position`) ) AUTO_INCREMENT=6 ; -- -- Contenu de la table `demo_photo` -- INSERT INTO `demo_photo` VALUES (1, '1.jpg', 2); INSERT INTO `demo_photo` VALUES (2, '2.jpg', 3); INSERT INTO `demo_photo` VALUES (3, '3.jpg', 4); INSERT INTO `demo_photo` VALUES (4, '4.jpg', 1); INSERT INTO `demo_photo` VALUES (5, '5.jpg', 0);
Ensuite il faut préparer la liste d’éléments sur lequel se portera le tri. Les attributs « id » des éléments de la liste devront respecter une syntaxe particulière : « nomGenerique_id ». Ou nomGenerique est le même pour tout les éléments (par exemple « photo ») et id l’identifiant unique (dans la base de données) de l’élément à trier.
Pour afficher la liste, on récupère bien sûr les éléments dans la base de données, en respectant l’ordre enregistré :
<ul id="list-photos"> <?php //connexion à la base de données define('DB_NAME', 'nom_de_la_base'); define('DB_USER', 'nom_utilisateur'); define('DB_PASSWORD', 'mot_de_passe'); define('DB_HOST', 'localhost'); $link = mysql_connect( DB_HOST , DB_USER , DB_PASSWORD ); mysql_select_db( DB_NAME , $link ); // récupération des photos dans le bon ordre $result = mysql_query( 'SELECT demo_photo.id, demo_photo.name FROM demo_photo ORDER BY demo_photo.position ASC' , $link ); while( $photo = mysql_fetch_assoc( $result )) { ?> <li id="photo_<?php echo $photo['id'] ?>"> <img src="photos_NY/<?php echo $photo['name'] ?/>" alt="Photos NY - Arnaud-k" /> <p>par Arnaud-k</p> </li> <?php } ?> </ul>
Il faut ensuite mettre en forme cette liste avec du CSS. Je ne pense pas qu’il faille beaucoup d’explications pour cette partie là.
/* style global de la liste non ordonné */ ul#list-photos{ list-style:none; height:140px; } /* style des éléments de la liste */ ul#list-photos li{ border:1px solid #ddd; padding:10px; cursor:move; height:100px; width:75px; float:left; margin-right:10px; background:#fff; color:#212326; font-size:12px; -moz-box-shadow:2px 2px 5px #ccc; } /* style de l'élément fantome, qui apparait losque que l'on bouge un élément */ ul#list-photos li.highlight{ background:#f2f2f2; border:1px dashed #212326; }
Ensuite vient la partie qui nous intéresse vraiment, le code JQuery. On initialise Sortable avec l’id de la liste et on met en Callback l’appel Ajax au fichier PHP qui va procéder à l’enregistrement dans la base données :
$(document).ready( function(){ // quand la page a fini de se charger $("#list-photos").sortable({ // initialisation de Sortable sur #list-photos placeholder: 'highlight', // classe à ajouter à l'élément fantome update: function() { // callback quand l'ordre de la liste est changé var order = $('#list-photos').sortable('serialize'); // récupération des données à envoyer $.post('ajax.php',order); // appel ajax au fichier ajax.php avec l'ordre des photos } }); $("#list-photos").disableSelection(); // on désactive la possibilité au navigateur de faire des sélections });
Et voici enfin le contenu du fichier ajax.php qui enregistre les positions des éléments. On récupère un $_POST de la forme : photo[] = id_photo. Il suffit de boucler sur ce tableau ($_POST['photo']) et on récupère les id des photos dans l’ordre :
<?php //connexion à la base de données define('DB_NAME', 'nom_de_la_base'); define('DB_USER', 'nom_utilisateur'); define('DB_PASSWORD', 'mot_de_passe'); define('DB_HOST', 'localhost'); $link = mysql_connect( DB_HOST , DB_USER , DB_PASSWORD ); mysql_select_db( DB_NAME , $link ); // changement de l'ordre des photos dans la base de données, photo par photo foreach( $_POST['photo'] as $order => $id_photo ) { mysql_query( 'UPDATE demo_photo SET position = \'' . safe( $order ) . '\' WHERE id = \'' . safe( $id_photo ) . '\'' , $link ) or die( mysql_error() ); } /***** fonctions *****/ function safe($var) { $var = mysql_real_escape_string($var); $var = addcslashes($var, '%_'); $var = trim($var); $var = htmlspecialchars($var); return $var; } ?>
J’espère que tutoriel est clair et compréhensible. Il faut, certes, un minimum de connaissances en html, javascript et php mais je pense que ça vaut quand même le coup !
Pas encore de billet sur le même sujet !