Draggable ( )

L'objet Draggable() permet de rendre un élément DOM précisé, déplaçable, glissable au sein d'une page DOM.
Cette fonctionnalité peut se révéler très utile dans la mise en place d'intefaces web2.0.

La syntaxe d'appel de cet objet est présentée ci après :
<script type="text/javascript"> /* syntaxe d'appel */ new Draggable('id_of_element',[options]); </script>
Les options définissables pour cet objet sont présentées dans le tableau ci après :

Propriété	Type	Défaut	Détails
revert	Boolean ou Function	false	Détermine si l'élément doit revenir à sa position intiale suite au Drag ou 'glissement'. Cette valeur peut aussi être une fonction/méthode aléatoire de replacement de l'élément.
snap	Boolean	false	Détermine si 'snapping' ou 'rupture' aura lieu. 10/01/2007 : maj nécessaire
zindex	Number	1000	Propriété CSS 'zindex' de l'élément déplaçable.
constraint	String	none	Peut valoir 'horizontal' ou 'vertical'. Ces valeurs contraignent le Drag ou 'glissement' à la direction précisée. 10/01/2007 : maj nécessaire
ghosting	Boolean	false	Permet de cloner l'élément déplaçable. L'élément original est laissé à sa place initiale lors du Drag ou 'glissement' ou 'déplaçement' du clone de l'élément jusqu'à ce le glissement se termine (ndr : on dit en anglais que l'élément est 'droppé' ou 'lâché' 'déposé').
starteffect	Function	voir fichier "drag&drop.js" l.257	Définition de l'effet de départ du Drag ou 'glissement'. Par défaut l'effet utilisé est un Effect.Opacity() .
reverteffect	Function	voir fichier "drag&drop.js" l.231	Définition de l'effet utilisé lors du retour de l'élément 'déplaçable' à sa position d'origine (ndr : option 'revert' à 'true'). Par défaut l'effet utilisé est un Effect.Move() n'utilisant pas d'effet spécifique de transition.
endeffect	Function	voir fichier "drag&drop.js" l.237	Définition de l'effet utilisé en fin de Drag ou 'glissement'. Par défaut l'effet utilisé est un Effect.Opacity() .

Des exemples d'utilisation de cet objet Draggable() sont présentés ci après.
Exemple simple d'utilisation de Draggable() Exemple d'utilisation paramétrable de Draggable()

Exemple simple d'utilisation de Draggable()

Cet exemple vous présente trois éléments DOM qui ont été définis 'Draggable'.
Vous pouvez donc déplacer ces éléments dans la page.
Une restriction est appliquée sur l'élément 'test_1' (ndr : zone bleue) qui, quelquesoit l'enmplamecement ou vous l'emmenez dans la page reviendra toujours à sa place initiale.
Une autre restriction est appliquée sur l'élément 'test_2' (ndr : zone verte) en le sens que l'on utilise pour le Drag ou 'glissement' une copie, un clone de l'élément 'test_2' qui lui reste en place jusqu'à la fin du 'glissement'.
L'exemple est testable ci après :

toto président toto président, webjax c'est bien, webjax c'est bien

toto président toto président, webjax c'est bien, webjax c'est bien

toto président toto président, webjax c'est bien, webjax c'est bien

Le code source de cet exemple est présenté ci après :
<!-- code HTML 1er élément --> <div id="test_0" style="border : orange 1px solid; background-color : #FFC1A4; color : #212121; width : 300px; height : 75px; "> toto président toto président, webjax c'est bien, webjax c'est bien </div> <br/> <script type="text/javascript"> new Draggable ('test_0',{ revert : false } ); </script> <!-- code HTML 2eme élément --> <div id="test_1" style="border : #0000FF 1px solid; background-color : #9393FF; color : #212121; width : 300px; height : 75px; "> toto président toto président, webjax c'est bien, webjax c'est bien </div> <br/> <script type="text/javascript"> new Draggable ('test_1',{ revert : false , ghosting : true } ); </script> <!-- code HTML 3eme élément --> <div id="test_2" style="border : #92FF24 1px solid; background-color : #D2FFA6; color : #212121; width : 300px; height : 75px; "> toto président toto président, webjax c'est bien, webjax c'est bien </div> <br/> <script type="text/javascript"> new Draggable ('test_2',{ revert : true , ghosting : false } ); </script>

Exemple d'utilisation paramétrable de Draggable()

Cet exemple vous permet de paramétrer un objet Draggable puis de l'appliquer sur l'un des trois éléments DOM présentés.
L'exemple est testable ci après :

Paramètres du Draggable à créer

Elément DOM à rendre déplaçable : test_3 (input text) test_5 (textarea) test_5 (div violette)
Retour en place de l'élément (revert) ? : oui (true) non (false)
Snap durant le Drag (snap) ? : oui (true) non (false)
Contrainte de déplacement (constraint) : (aucune contrainte) horizontal vertical
Clonage de l'élément (ghosting) ? : oui (true) non (false)

webjax c'est bien webjax c'est bien

toto président, toto président, webjax c'est bien, webjax c'est bien

Bouton d'action :

!!! :: attention le concept de Draggable n'est pas applicable aux champs 'input' et 'textarea'.

: 10/01/2007 19:04:28 | : Scriptaculous, Scriptaculous.js, web2.0, Drag&Drop, draganddrop, Draggable, glisser, déposer, glisserdéposer, exemple, utilisation, démo,

Aucun commentaire enregistré