Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Aujourd'hui nous allons regarder à un autre des plugins intégrés à la librairie “more”. Sortables (comprenez "listes ordonnables" en français) est un plugin très puissant et peut vraiment vous ouvrir plein d'options lors de vos designs d'interfaces utilisateurs. Les sortables incluent aussi une fonction très pratique appelée “serialize” qui sortira un tableau listant les ids des éléments - super pour l'intégration avec le script côté serveur. Lisez la suite pour apprendre à créer un nouveau groupe d'éléments ordonnables, et amusez vous avec la démo à la fin.

Les Bases

Créer un nouvel objet Sortable

Avant tout, nous allons envoyer nos éléments dans des variables. Pour les sortables, si vous voulez que plusieurs listes puissent se glisser et déposer des éléments entre eux, vous allez devoir placer toutes les listes dans un tableau, comme ceci : 

var sortableListsArray = $$('#listA, #listB');

Cela place les ids de deux éléments ul dans le tableau. Nous pouvons maintenant créer un nouvel objet sortable à partir de ce tableau :

var sortableLists = new Sortables(sortableListsArray);

Si nous utilisons le code html suivant :

<ul id="listA">
	<li>Item A1</li>
	<li>Item A2</li>
	<li>Item A3</li>
	<li>Item A4</li>
</ul>
 
<ul id="listB">
	<li>Item B1</li>
	<li>Item B2</li
	<li>Item B3</li>
	<li>Item B4</li>
</ul>

alors nos listes sortable ressembleront à quelque chose comme cela :

• Item A1
• Item A2
• Item A3
• Item A4

• Item B1
• Item B2
• Item B3
• Item B4

Options de Sortables

Si vous voulez personnaliser les fonctionnalités de votre liste ordonnable, vous allez devoir modifier les options.

constrain

par défaut : false

Cette option déterminera si les éléments de votre liste ordonnable peuvent passer entre les uls de l'objet sortable. Par exemple, si nous avons deux uls dans l'objet sortable, vous pouvez “constrain” (restreindre) les éléments de la liste à leur ul parent en configurant “constrain: true.”

var sortableLists = new Sortables(sortableListsArray, {
 constrain: false //false is default
});

clone

par défaut : false

Clone vous permet d'ajouter un élément “clone” qui restera sous votre curseur quand vous ferez un déplacement, gardant l'élément original en place. Regardez l'exemple plus bas pour voir un clone.

var sortableLists = new Sortables(sortableListsArray, {
 clone: true //false par défaut
});

handle

par défaut : false

Handle acceptera qu'un élément agisse comme pointeur de déplacement. C'est très pratique si vous voulez que le texte de vos éléments de listes reste sélectionnable ou que vous voulez d'autres actions dans le li. La valeur par défaut (false) fera de d'élément ordonnable (le li) le pointeur de déplacement.

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
 handle: handleElements //false par défaut
});

opacity

par défaut - 1

Opacity vous permet 'ajuster l'opacité de l'élément ordonnable. Si vous utilisez un clone, opacity affecte l'élément qu'il trie, pas l'élément qui suit votre curseur.

var sortableLists = new Sortables(sortableListsArray, {
 opacity: 1 //par défaut sur 1
});

revert

par défaut : false

Revert acceptera soit “false” ou des options Fx. Si vous configurez des options Fx dans revert, cela créera un effet pour les éléments ordonnables qui sont en toujours en place. Par exemple, vous pouvez mettre “duration: long” et le clone prendra son temps pour retourner à sa place dans la liste quand vous relâchez. Pour voir revert en action, regardez l'exemple plus bas :

var sortableLists = new Sortables(sortableListsArray, {
 revert: false //valeur par défaut
});
 
//vous pouvez aussi définir les options Fx
var sortableLists = new Sortables(sortableListsArray, {
 revert: {
 duration: 50
 }
});

snap

Par défaut : 4

Snap vous permet de définir le nombre de pixels qu'il faut prendre quand un utilisateur déplace la souris pour que l'élément commence à suivre le déplacement.

var sortableLists = new Sortables(sortableListsArray, {
 snap: 10 //l'utilisateur doit bouger de 10 px pour que l'élément suive
});

Evènements de Sortable

Les évènements de sortable sont sympas et simples. Chacun d'eux passera l'élément qui est ordonné (pas le clone que vous déplacez, si vous utilisez un clone).

• onStart - se lance quand le déplacement commence (quand la valeur de "snap" est dépassé)
• onSort - se lance quand l'élément change d'ordre
• onComplete - se lance quand vous relâchez un élément en place

Nous allons voir les évènements plus en détails (et vous pourrez les voir en action) à travers l'exemple plus bas.

Les méthodes de Sortable

Nous n'avons pas particulièrement parlé des méthodes auparavant, malgré que nous les ayions utilisé pas mal de fois. Les Méthodes sont essentiellement des fonctions qui proviennent de classes. Alors que les classes seront le sujet d'un autre jour, prenons une minute pour en expliquer le principe général. Ce plugin (et les autres que nous avons vu), suivent tous le même principe - l'initiation d'une nouvelle instance (“new”) du plugin, la définition d'un ou plusieurs sélecteurs en paramètre, la définition des options, l'ajout d'évènements. Et juste avec ça, nous avons un nouveau sortable ou tween. Ce principe est la base d'une classe. Une classe permet de stocker des options et fonctions pour pouvoir les utiliser à nouveau. Les Méthodes sont des fonctions spécifiques qui sont dans les classes et leurs ajouent des fonctionnalités. Par exemple .set() et .get() sont des Méthodes qui étendent une propriété d'un élément. Dans le Fx.Tween, .start() est une méthode. Pour y voir plus clair, voyons quelques méthodes de sortable :

.detach();

Avec .detach();, vous pouvez “détacher” tous les pointeurs courants, pour rendre l'objet entier non ordonnable. Pratique pour désactiver le tri.

.attach();

Cette méthode attachera les pointeurs aux éléments ordonnables, fonctionne pour activer le tri après un .detach();.

.addItems();

Cela vous permet d'ajouter des nouveaux éléments à votre liste ordonnable. Disons que vous avez une liste ordonnable dans laquelle l'utilisateur peut ajouter un nouvel élément, quand vous ajouter ce nouvel élément, vous devrez activer le tri sur ce nouvel élément.

.removeItems();

Cette méthode vous permet de supprimer la possibilité de trier un élément d'un liste ordonnable. C'est pratique quand vous voulez bloquer un élément particulier d'une liste et ne pas le laisser être trié avec les autres.

.addLists();

Au lieu de seulement ajouter un nouvel élément à une liste existant, vous pouvez avoir besoin d'ajouter une nouvelle liste entière à l'objet ordonnable. .addLists(); vous permet même d'ajouter plusieurs listes, rendant ainsi l'ajout de listes ordonnables très simple.

.removeLists();

Vous permet de supprimer des listes entière dans l'objet ordonnable. C'est pratique quand vous voulez bloquer une liste particulière en place. Vous pouvez retirer la liste, laissant ainsi les autres listes dans l'objet ordonnable, mais en bloquant le contenu de la liste retirée.

.serialize();

Tout ces tris sont formidables, mais comment faire des choses avec les données? .serialize(); retournera une liste des ids des éléments, ainsi que leur ordre dans la liste. Vous pouvez choisir sur quelle liste de l'objet vous souhaitez récupérer des données en passant son numéro.

Il y a en fait plus de méthodes que ce que nous détaillons ici, mais l'important est que cela vous serve d'introduction au concept s'il est nouveau pour vous, et nous irons plus loin dans les méthodes et classes dans un prochain tutoriel.

Exemple

L'exemple suivant utilise plusieurs options, tous les évènements et méthodes décrits ci-dessus. J'espère que le code parlera de lui-même, mais reportez vous aux commentaires du code pour plus d'infos. Rappelez-vous, tout ce qu'on va voir ci-dessous doit aller à l'intérieur de l'évènement domready.

var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
 //création d'un clone pour suivre mon curseur lors du déplacement
	clone: true,
 //définit la classe du pointeur de déplacement
	handle: '.handle',
 //vous permet de créer un effet pour
 //l'élément qui retourne dans la liste après le déplacement
	revert: {
	//acceptes les options Fx
	duration: 50
	},
 //definit l'opacité de l'élément de la liste, pas le clone
	opacity: .5,
 
	onStart: function(el){
	//passe en paramètre l'element que vous déplacez
	$('start_ind').highlight('#F3F865');
	el.highlight('#F3F865');
	},
	onSort: function(el) {
	//passe l'élément que vous déplacez
	$('sort_ind').highlight('#F3F865');
	},
	onComplete: function(el) {
	//passe l'élément que vous déplacez
	$('complete_ind').highlight('#F3F865');
	var listOne = sortableLists.serialize(0);
	var listTwo = sortableLists.serialize(1);
	$('numberOrder').set('text', listOne).highlight('#F3F865');	;
	$('letterOrder').set('text', listTwo).highlight('#F3F865');	;
	}
}).detach(); //désactive les pointeurs, donc il faudra appuyer
//sur le bouton pour les laisser se déplacer
 
var addListoSort = $('addListTest');
 
$('addListButton').addEvent('click', function(){
 sortableLists.addLists(addListoSort);
});
 
$('removeListButton').addEvent('click', function(){
	sortableLists.removeLists(addListoSort);
});
 
$('enable_handles').addEvent('click', function(){
	sortableLists.attach();
});
 
$('disable_handles').addEvent('click', function(){
	sortableLists.detach();
});
 
var itemOne = $('one');
 
$('add_item').addEvent('click', function(){
	sortableLists.addItems(itemOne);
});
 
$('remove_item').addEvent('click', function(){
	sortableLists.removeItems(itemOne);
});

Les pointeurs ne sont pas activés par défaut (si vous avez bien compris le code précédent). Pour commencer le tri, vous devrez "activer les pointeurs".

Activer les pointeurs
Désactiver les pointeurs

Ajouter élément 1
Supprimer élément 1

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• A
• B
• C
• D
• E
• F
• G

Ajouter une Liste
Supprimer une Liste

• add A
• add B
• add C
• add D
• add E
• add F
• add G

Pour en savoir plus…

Regardez l'endroit des docs sur les listes ordonnables

Télécharger un zip avec tout ce qu'il faut pour débuter

Il inclut l'exemple ci-dessus, un fichier externe jaavscript, une feuille de style css, un fichier html simple et les librairies du noyau Mootools 1.2 et extensions.

Le tutoriel de demain

Dans le Jour 17 nous explorerons le plugin accordion