Sortable ( )

L'objet Sortable() permet de définir des listes triables d'éléments.
Cet objet s'adapte très bien aux éléments DOM HTML 'ul' et 'li' et 'ol'.
Cela permet de définir des ordres de prioriété dans une liste avec la possibilité de déclencher des requêtes HTTP (ndr : par exemple) lors d'un nouveau tri de la liste (ndr : applications réelles multiples).

!!! :: avant d'étudier ce concept d'objet Sortable() il est bon de se délecter d'abord des précisions sur les objets Draggable et Droppables afin de mieux entrevoir les réelles possibilités de cet objet Sortable .


Cette page présente des exemples d'utilisation de cet objet Sortable() via sa méthode Sortable.create(element,options).
La syntaxe d'appel de cet objet est recopiée ci après :
Sortable.create('id_element_dom',[options]);

Le tableau d'options que l'on peut passer à Sortable.create() est recopié ci après :

Propriété	Type	Arguments ou Défaut	Détails
tag	String	li	Définit le type de tag ou d'élément (des éléments fils de l'élément précisé en 1er argument), qui seront rendus triables. Pour les éléments 'ul' et 'ol' le tag ou élément 'li' est défini.
only	String (classe CSS) ou Array (classes CSS)	none	Permet de faire en sorte que les éléments à rendre triable doivent être mis en forme avec la ou les classes CSS précisées. Si plusieurs classes sont précisées, toutes doivent être présentes pour rendre triable un élément DOM.
overlap	String	vertical	'horizontal' ou 'vertical'.
constraint	String	vertical	Permet de restreindre le mouvement d'objets Draggable. Vous pouvez consulter la page Draggable(class) pour plus de détails. Peut valoir 'horizontal' ou 'vertical' ou ''.
containment	Array		Permet d'autoriser le déplacement d'éléments entre éléments Sortables . La méthode prend pour paramètre un Array d'éléments DOM ou d'ids d'éléments DOM (ndr : identifiants des containers d'éléments).
format	RegExp		11/01/2007 : mise à jour à faire
handle		none	voir page Draggables(class) pour plus de détails. Permet de définir un handle les éléments Draggables.
hoverclass	String (classe CSS)	none	Permet de définir une classe CSS de survol (mouseOver) pour les éléments Droppables .
ghosting	Boolean	false	Permet de créer un clone d'élément DOM. Le clone est utilisé pour le "drag", "déplacement" ou "glissement" tandis que l'élément initial est laissé en place pour permettre à l'utilisateur de bien percevoir son action visuellement.
dropOnEmpty	Boolean	false	Si cette option est passée à 'true', le container Sortable (ndr : 'triable'), sera transformé en objet Droppables pouvant recevoir des objets Draggables.
scroll	String		11/01/2007 : mise à jour à faire
scrollSensitivity	Number	20	11/01/2007 : mise à jour à faire
scrollSpeed	Number	15	11/01/2007 : mise à jour à faire
tree	Boolean	false	Si cette valeur est passée à true, cela permet de définir la fonctionnalité Sortable ou "triable" sur tous les éléments précisés dans 'treeTag' (ndr : voir ligne du tableau suivante).
treeTag	String	ul	Type d'éléments containers d'éléments à rendre triable.

Les exemples d'utilisation sont présentés ci après dans la page et sont accessibles via la liste déroulante ci après :
Exemple simple d'utilisation de Sortable.create () Exemple paramétrable d'utilisation de Sortable.create() Exemple "Puzzle" avec images et Sortable.create()

Exemple simple d'utilisation de Sortable.create ()

Cet exemple vous permet de vous familiariser avec l'utilisation de listes triables et donc l'utilisation de Sortable.create().
L'exemple est testable ci après :

• liste_0 :: element_0
• liste_0 :: element_1
• liste_0 :: element_2
• liste_0 :: element_3

• liste_1 :: element_0
• liste_1 :: element_1
• liste_1 :: element_2
• liste_1 :: element_3

Le code source de l'exemple est présenté ci après :
Code HTML des éléments 'ul' et 'li :
<div style="width : 400px; height : 150px;"> <!-- liste d'éléments à gauche de base --> <ul id="liste_0" style="float : left;"> <li>liste_0 :: element_0</li> <li>liste_0 :: element_1</li> <li>liste_0 :: element_2</li> <li>liste_0 :: element_3</li> </ul> <!-- liste d'éléments à droite de base --> <ul id="liste_1" style="float : left;"> <li>liste_1 :: element_0</li> <li>liste_1 :: element_1</li> <li>liste_1 :: element_2</li> <li>liste_1 :: element_3</li> </ul> </div>
Le code Javascript définissant les éléments Sortable ou "triables" :
<script type="text/javascript"> // <![CDATA[ Sortable.create("liste_0", {dropOnEmpty:true,containment:["liste_0","liste_1"],constraint:false}); Sortable.create("liste_1", {dropOnEmpty:true,handle:'handle',containment:["liste_0","liste_1"],constraint:false}); // ]]> </script>
Comme on peut le voir dans cet exemple, on utilise l'option 'containment' pour rendre actif le déplacement d'éléments de containers Sortable entre eux.
On peut voir lors d'un tel déplacement (ndr : test avec les listes au dessus du code), que la classe CSS est mise à jour lors du passage dans un nouveau container Sortable.

Exemple paramétrable d'utilisation de Sortable.create()

Cet exemple permet de paramétrer un objet Sortable sur un élément container 'ul' ou 'ol'.
L'exemple est testable ci après :
Element à rendre Sortable : liste_2 ('ul' , liste bleue ) liste_3 ('ol' , liste rose)
Sauvegarde position élément (ghosting) : oui (true) non (false)
Contrainte déplacement (constraint) : (aucune contrainte) horizontale (horizontal) verticale (vertical)

!!! :: le bouton ci-dessous vous permet de supprimer un objet Sortable ceci afin de vous permettre de tester à l'infini l'exemple sur cette page sans rechargement.

Liste pour effectuer la suppression : liste_2 ('ul' , liste bleue ) liste_3 ('ol' , liste rose)

• liste_0 :: element_0
• liste_0 :: element_1
• liste_0 :: element_2
• liste_0 :: element_3

1. liste_1 :: element_0
2. liste_1 :: element_1
3. liste_1 :: element_2
4. liste_1 :: element_3

Le code source de cet exemple est présenté ci après :
Code HTML des listes et du bouton d'action :
<div style="width : 400px; height : 150px;"> <!-- liste d'éléments à gauche de base --> <ul id="liste_2" style="float : left;"> <li>liste_0 :: element_0</li> <li>liste_0 :: element_1</li> <li>liste_0 :: element_2</li> <li>liste_0 :: element_3</li> </ul> <!-- liste d'éléments à droite de base --> <ol id="liste_3" style="float : left;"> <li>liste_1 :: element_0</li> <li>liste_1 :: element_1</li> <li>liste_1 :: element_2</li> <li>liste_1 :: element_3</li> </ol> </div> <!-- code du bouton d'action --> <input type="button" id="ok_1" value="rendre Sortable avec paramètres l'élément container sélectionné" onClick="Sortable.create($F('el'), { ghosting : Boolean($F('ghosting')) , constraint : String($F('constraint')) } );" />

Le code source du bouton d'action permettant de supprimer un objet Sortable est recopié ci après :
<!-- liste déroulante sélection élément DOM --> Liste pour effectuer la suppression : <select id="eldestroy"> <option value="liste_2">liste_2 ('ul' , liste bleue )</option> <option value="liste_3">liste_3 ('ol' , liste rose)</option> </select> <!-- bouton permettant la suppression d'un Sortable --> <input type="button" id="ok_2" value="supprimer Sortable de cet élément" onClick="Sortable.destroy($F('eldestroy'));" />

Exemple "Puzzle" avec images et Sortable.create()

Cet exemple reprend des images d'une page de démonstration du wiki Scriptaculous original.
Cet exemple permet de mettre en place un jeu type "puzzle" ou il vous faut remettre dans l'ordre 3 images placés délibérement dans un mauvais ordre.
Cet exemple permet de se rendre compte de l'utilisation possible de Sortable sur d'autres éléments que des éléments de liste HTML.
L'exemple est testable ci après :

Le code HTML des images et du container 'div#puzzle' :
Le code source de l'exemple est recopié ci après :
<div id="puzzle"> <img style="position: relative; z-index: 0; left: 0px; top: 0px; opacity: 0.999999;" id="image_2" src="http://www.webjax.eu/images/pages/page125_2.jpg" alt=""> <img style="position: relative; z-index: 0; left: 0px; top: 0px; opacity: 0.999999;" id="image_1" src="http://www.webjax.eu/images/pages/page125_1.jpg" alt=""> <img style="position: relative; z-index: 0; left: 0px; top: 0px; opacity: 0.999999;" id="image_0" src="http://www.webjax.eu/images/pages/page125_0.jpg" alt=""> </div>
Le code Javascript permettant de rendre Sortable ou "triable" le container 'div#puzzle' et ses éléments fils 'img' :
<script type="text/javascript" language="javascript"> // <![CDATA[ Sortable.create("puzzle", {tag:'img',overlap:'horizontal',constraint: false, onUpdate:function(){ p = $("puzzle"); p.moves = p.moves || 0; p.moves++; $('puzzleinfo').innerHTML = "Vous avez effectué " + p.moves + " mouvement/déplacement" + (p.moves>1 ? "s" : ""); if(Sortable.serialize("puzzle")== "puzzle[]=0&puzzle[]=1&puzzle[]=2") { $('puzzleinfo').innerHTML = "Vous avez résolu le puzzle en " + p.moves + " mouvement(s)!"; Element.Class.add('puzzleinfo','msgSucces_0'); } } }) // ]]> </script>

: 10/01/2007 18:24:45 | : Scriptaculous, Scriptaculous.js, web2.0, Drag&Drop, draganddrop, Sortable, glisser, déposer, glisserdéposer, liste, triables, organisables, exemple, utilisation,

Aucun commentaire enregistré