Construire un menu amovible sur toile avec GreenSock

À vol d'oiseau, le balisage est sémantique, sans obligation de divs pour pirater la présentation et la position du menu; rendant finalement ce balisage portable, réutilisable et même extensible.

Comment fonctionne Draggable

Glissable permet à n'importe quel élément d'être "glissable" verticalement et horizontalement, en fonction d'instructions personnalisées définies.

De la même manière que pour toute bibliothèque JavaScript, nous devrons charger des scripts avant d'entrer dans un code ou une configuration personnalisée..

Nous utilisons TweenMax, nous l'avons donc chargé en premier. Cependant, en ce qui concerne l'ordre de chargement des scripts, les auteurs ne devraient pas s'intéresser à une chaîne de dépendance. Cela signifie que vous pouvez charger TweenMax puis Draggable, ou inversement. Draggable va maintenant vous donner le pouvoir d'écrire du code qui permet à vos éléments de choix de glisser, glisser, faire tourner et même faire glisser!

La configuration déplaçable

Avec des scripts définis et chargés, il est temps d'écrire du code. Pour Draggable nous allons définir un constructeur comme point de départ initial de ce voyage. La syntaxe du constructeur vous permet de passer un cible et série de options.

Glissable (cible: objet, vars: objet) 

Au lieu d'utiliser le constructeur ci-dessus, vous pouvez trouver l'option suivante un peu plus flexible:

Draggable.create ([obj1, obj2], option1: valeur1, option2: valeur2) 

En règle générale, il est préférable d'utiliser Draggable.create () au lieu du constructeur, car il peut gérer plusieurs éléments en un seul appel.

Draggable.create (cible, options) 

L'argument appelé cible car la méthode create référence l’élément qui doit pouvoir être déplacé; que ce soit un élément DOM normal, un objet jQuery ou un tableau d’éléments, comme nous l’avons déjà vu. le options L'argument nous permet de passer un littéral d'objet contenant des combinaisons clé / valeur avec une multitude d'options fournies par l'API. Pour une liste complète des options, reportez-vous à la documentation officielle de GreenSock..

Tester Draggable

Savoir comment déboguer des événements déplaçables (en cas de problème) peut s'avérer extrêmement utile avant de commencer tout projet, mais ne vous sentez pas submergé par toutes les options sous les étoiles. se familiariser avec les bases et travailler à partir de là.

var conteneur = document.querySelectorAll ('. conteneur') [0]; 

Nous allons prendre notre conteneur en utilisant le document.querySelectorAll méthode fournie par notre ami JavaScript. Notez que nous utilisons toujours le balisage que j'ai écrit au début de ce tutoriel..

Draggable.create ([conteneur], ); 

Nous allons ajouter notre variable de conteneur dans un tableau ([]) et enfin passer un objet vide où des options seront définies pour le débogage.

Draggable.create ([conteneur], onDrag: function () , onDragStart: function () , onDragEnd: function () ); 

J'ai ajouté trois lignes à l'intérieur du littéral d'objet qui contiennent des événements auxquels nous allons réagir. Plus précisément, nous allons utiliser ces trois événements glisser pour tester quand et comment l'événement répond.

var conteneur = document.querySelectorAll ('. conteneur') [0]; function kennyLogger (event) console.log (event.type + "+ 'fired'); Draggable.create ([conteneur], onDrag: function (event) kennyLogger (event); // déclenche 'mousemove' pour appareils non tactiles, onDragStart: fonction (événement) kennyLogger (événement);, onDragEnd: fonction (événement) kennyLogger (événement);); 

Ce qui est à l’intérieur de ces fonctions appartient à vous, mais pour le moment je vais ajouter une fonction de journalisation de la console qui nous en dira un peu plus sur les événements en cours. Je l'appelle l'enregistreur d'événements «kennyLogger».

Options de passage

Maintenant que les tests sont en place, nous pouvons passer plus d'options pour ajuster l'événement drag..

Draggable.create (conteneur, throwProps: true, dragResistance: 0.25, edgeResistance: 1, throwResistance: 1000); 

Ces valeurs par défaut sont bien expliquées dans la documentation GreenSock. Vous avez peut-être remarqué le Projection jeu de clés pour vrai. En effet, dans notre prochain et dernier didacticiel, nous utiliserons le throwPropsPlugin pour contrôler l’élan du menu hors zone de travail lorsque celui-ci s’ouvre et se ferme. ThrowPropsPlugin étant un avantage membre de GreenSock, vous pouvez utiliser cette URL uniquement à l'aide de CodePen, comme indiqué au début de ce didacticiel..

Temps de démonstration

Commencez par inclure tous nos scripts qui incluent throwPropsPlugin, Draggable et TweenMax (rappelez-vous: l'ordre n'a pas d'importance!).

Rappelez-vous que nous chargeons Draggable, TweenMax et le throwPropPlugin. En les appliquant à notre balise d'origine et en utilisant les lignes pour le débogage, nous pouvons enfin déplacer le conteneur à l'aide de la souris ou du doigt sur des périphériques tactiles!

N'hésitez pas à expérimenter différentes valeurs et options. Cette démo est censée être un terrain de jeu, pas le produit final, alors allez-y et casser des trucs, puis corrigez-les!

Conclusion

Si vous souhaitez aller plus loin avec d'autres utilitaires que Draggable, vous pouvez consulter le site Web de GreenSock pour plus d'informations. Je suggère de jeter un coup d'oeil à SplitText pour une touche typographique sérieuse.

À la prochaine fois pour le dernier et dernier tutoriel de cette série, où nous bouclerons le menu hors-toile!