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 !

Le plugin JQuery Multiselect, qui fonctionne uniquement avec JQuery et JQuery UI, permet de créer des listes <select> améliorées. Avec le plugin, il est possible chercher un mot, une expression dans la liste, de classer les divers éléments sélectionnés, d’utiliser les boutons ‘ajouter tout’ et ‘retirer tout’.

L’affichage est également optimisé, il est basé sur les thèmes de JQuery UI. Plusieurs designs sont donc disponibles par défaut mais rien n’empêche de créer le sien.

Le plugin est très fonctionnel et bien pensé ergonomiquement. Il est également très simple à mettre en place, il suffit de créer le <select> comme normalement et d’initialiser le plugin avec le bon sélecteur. La démo du plugin se trouve par ici.

Pas encore de billet sur le même sujet !

Pour ce post de fin de semaine, un lien sympa vers un site qui fait une belle utilisation de JQuery.

Sur la page d’accueil de slicemachine.com tout d’abord avec le menu principal avec un affichage des éléments en pseudo 3d (mais qui ne bougent pas) et un effet de rollover que je trouve sympa. On retrouve également des menus accordéon (sur tout le contenu) sur les pages « our services » et « faq« . Enfin, il y a l’utilisation de JQueryUI sur la page « order now » avec les slider, les cases à cocher et les effets d’apparition. Par ailleurs, je trouve ce formulaire assez bien réalisé.

Pas encore de billet sur le même sujet !