Een drag-off Off-Canvas-menu bouwen met GreenSock

Vanuit een vogelperspectief is de markup semantisch, zonder de vereiste van divs voor het hacken van de menu-indeling en -positie; uiteindelijk maakt deze markup draagbaar, herbruikbaar en zelfs uitbreidbaar.

Hoe Draggable werkt

Met Draggable kan elk element verticaal en horizontaal worden 'gesleept' op basis van gedefinieerde aangepaste instructies.

Net als bij andere JavaScript-bibliotheken, moeten we scripts laden voordat we ingaan op een code of aangepaste configuraties.

We gebruiken TweenMax, dus we laden dat eerst. Als het echter om het laden van scripts gaat, moeten auteurs zich niet bezighouden met een afhankelijkheidsketen. Dit betekent dat u TweenMax en vervolgens Draggable kunt laden, of omgekeerd. Draggable geeft je nu de mogelijkheid om code te schrijven waarmee je elementen naar keuze kunnen vegen, vegen, draaien en zelfs slepen!

De versleepbare installatie

Met scripts gedefinieerd en geladen is het tijd om wat code te schrijven. Voor Draggable zullen we een definiëren bouwer als het startpunt van deze reis. De syntaxis voor de constructor staat u toe om een ​​a te passeren doelwit en reeks van opties.

Draggable (doel: Object, vars: Object) 

In plaats van de bovenstaande constructor te gebruiken, vindt u de volgende optie misschien wat flexibeler:

Draggable.create ([obj1, obj2], option1: value1, option2: value2) 

Meestal is het het beste om te gebruiken Draggable.create () in plaats van de constructor, omdat het meerdere elementen kan accommoderen met één oproep.

Draggable.create (doel, opties) 

Het argument waarnaar wordt verwezen als doelwit want de create-methode verwijst naar het element dat versleepbaar moet zijn; of het nu om een ​​gewoon DOM-element, een jQuery-object of een reeks elementen gaat zoals we eerder zagen. De opties Met argument kunnen we een letterlijk object doorgeven dat sleutel / waarde-paren bevat met een groot aantal opties die door de API worden geleverd. Raadpleeg de officiële GreenSock-documentatie voor een volledige lijst met opties.

Draggable testen

Weten hoe te debuggen Draggable gebeurtenissen (mocht het misgaan) kunnen zeer waardevol zijn voor het begin van een project, maar voel je niet overweldigd door te proberen elke optie onder de sterren te leren; vertrouwd raken met de basis en van daaruit werken.

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

We pakken onze container met behulp van de document.querySelectorAll methode geleverd uit de doos door onze buddy JavaScript. Merk op dat we nog steeds de markeringen gebruiken die ik aan het begin van deze tutorial heb geschreven.

Draggable.create ([container], ); 

We voegen onze containervariabele toe aan een array ([]) en tenslotte een leeg object doorgeven waar opties worden gedefinieerd voor foutopsporingsdoeleinden.

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

Ik heb drie regels in het object letterlijk toegevoegd die gebeurtenissen bevatten waar we op zullen reageren. In het bijzonder gebruiken we deze drie sleepgebeurtenissen om te testen wanneer en hoe de gebeurtenis reageert.

var container = document.querySelectorAll ('. container') [0]; function kennyLogger (event) console.log (event.type + "+ 'fired'); Draggable.create ([container], onDrag: function (event) kennyLogger (event); // miresverwijderen 'voor niet-aanraakapparaten, onDragStart: functie (event) kennyLogger (event);, onDragEnd: function (event) kennyLogger (event);); 

Wat binnen deze functies valt, is aan jou, maar voorlopig zal ik een console-logging-functie toevoegen die ons iets vertelt over de gebeurtenissen die plaatsvinden. Ik noem het de "kennyLogger" -logger.

Doorgevende opties

Nu we de tests hebben uitgevoerd, kunnen we meer opties doorgeven om de sleepgebeurtenis te verfijnen.

Draggable.create (container, throwProps: true, dragResistance: 0,25, edgeResistance: 1, throwResistance: 1000); 

Deze standaardwaarden worden uitgebreid beschreven in de GreenSock-documentatie. Je hebt misschien het throwProps toets ingesteld op waar. Dit komt omdat we in onze volgende en laatste zelfstudie de throwPropsPlugin gebruiken voor het regelen van het momentum van het menu buiten het canvas bij het openen en sluiten. Omdat throwPropsPlugin een voordeel van het GreenSock-lid is, kunt u deze URL alleen gebruiken via CodePen zoals vermeld aan het begin van deze tutorial.

Demotijd

Begin met het opnemen van al onze scripts die throwPropsPlugin, Draggable en TweenMax bevatten (onthoud: bestel doet er niet toe!).

Vergeet niet dat we Draggable, TweenMax en de throwPropPlugin laden. Door die toe te passen op onze oorspronkelijke opmaak en door de regels voor foutopsporing te gebruiken, kunnen we de container eindelijk verplaatsen met onze muis of vinger op apparaten met aanraakbediening!

Experimenteer met verschillende waarden en opties. Deze demo is bedoeld als een speeltuin, niet als een eindproduct, dus ga gek en breek dingen en repareer het dan!

Conclusie

Als je naast Draggable verder wilt gaan met andere hulpprogramma's, kun je de website van GreenSock bekijken voor meer informatie. Ik stel voor een kijkje te nemen in SplitText voor een serieus typografisch talent.

Volg de volgende keer de laatste en laatste zelfstudie van deze serie, waarin we het menu buiten het canvas omsluiten!