Maak elementen op uw site dragelijk met Draggabilly.js

Er zijn veel tutorials over hoe je dingen dragbaar kunt maken op een webpagina . jQuery is een van de gemakkelijkste manieren. U hebt zelfs de gebruikersinterface van jQuery niet nodig, slechts een klein beetje hulp van de muisrichtingsfunctie en misschien enige optionele bediening. Maar wat als u geen jQuery-code wilt aanraken en toch dingen dragelijk wilt maken? Dan is draggabilly.js de juiste tool voor jou.

Met Draggabilly.js kunt u elk element op een webpagina versleepbaar maken. U kunt het gedrag van het versleepbare element aanpassen, zoals het toevoegen van rasterbewegingen, het binden van gebeurtenislisteners aan gebeurtenissen, het beperken van de bewegingen tot alleen de x- of y-as en nog veel meer. Het ondersteunt ook verschillende browsers, IE8 + en zelfs multi-touch mobiele browsers.

Ermee beginnen

Om aan de slag te gaan, hoeft u alleen de bron Draggabilly.js aan uw site toe te voegen . Er is geen behoefte aan andere afhankelijkheden. Je kunt het bestand van GitHub halen.

Wat de rest betreft, zul je werken met een javascript-functie zoals hieronder.

Eenvoudig slepen

U moet het volgende fragment opnemen in uw pagina zodat het slepen kan werken.

 var elem = document.querySelector ('# idHere'); var draggie = nieuwe Draggabilly (elem, {// opties ...}); 

De #idHere is de ID die u in het HTML-element moet plaatsen dat u versleepbaar wilt maken. In de variabele draggie kunt u desgewenst een optie draggie . Als u die optie niet nodig heeft, kunt u ook de id uit de elem variabele definiëren.

Als ik bijvoorbeeld een id van #demo zonder enige optie, dan kan ik het fragment als volgt schrijven:

 var elem = document.querySelector ('# demo'); var draggie = nieuwe Draggabilly ('# demo'); 

Binnen de HTML roept u de id van het element op dat u wilt verslepen. Het volgende is een eenvoudig voorbeeld.

 Sleep me 

Er zijn veel andere manieren om Draggabilly's gedrag te beïnvloeden. U kunt het slepen beperken om alleen op de 'y' - of 'x'-as te staan, zoals:

 nieuwe Draggabilly ('#demo', {axis: 'x'}); 

Of u kunt een afhandelingsoptie toevoegen, die het startelement van de sleepinteractie als volgt specificeert:

 var elem = document.querySelector ('# demo'); nieuwe Draggabilly (elem, {handle: '.handle'}); 

Deze .handle optie is handig als alle interne elementen zoals invoer en formulieren niet versleepbaar hoeven te zijn. Er zijn nog steeds veel andere opties die u kunt toevoegen zoals insluitingen, rasters, methoden en gebeurtenissen. Ga naar de officiële startpagina van dragabbilly om de volledige documentatie te bekijken.

Laatste gedachte

De sleepfunctie heeft in de meeste gevallen weinig effect op het webontwerp, maar het is nog steeds vrij belangrijk. Het gebeurt het vaakst in web-apps of games. De eenvoud van de installatie en de verscheidenheid aan verschillende sleepmethoden maken dit een echt handig hulpmiddel om uit te proberen.

Inleiding tot gedeeld geheugen in JavaScript

Gedeeld geheugen is een geavanceerde functie van JavaScript, dat threads (gelijktijdig uitgevoerde delen van een proces) kunnen gebruiken. Het delen van het geheugen betekent dat u geen moeite hebt om bijgewerkte gegevens door te geven tussen threads en alle threads. U kunt dezelfde gegevens in het gedeelde geheugen openen en bijwerken

(Technische en ontwerptips)

Google I / O 2017: wat Google van plan is voor VR en AR

Na zich grotendeels te hebben gericht op de vele functies en services die in 2017 beschikbaar komen in het ecosysteem van Google, heeft Google een tweede keynote gehouden tijdens I / O 2017 die zich uitsluitend richt op twee onderwerpen: virtual reality en augmented reality .Voor deze I / O 2017-keynote heeft Google uitgebreid waar Daydream en Tango in de nabije toekomst naartoe gaan en deze veranderingen zijn nogal belangrijk voor de VR / AR-ambities van het bedrijf

(Technische en ontwerptips)