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.

Het stroomlijnen van de Web Development Workflow met Yeoman

Er zijn veel tools voor het bouwen van web-apps, maar ze allemaal samenvoegen en ze in onze workflow passen zou heel omslachtig kunnen zijn. We hebben ook de neiging om repetitieve taken uit te voeren bij het bouwen van webapps, zoals het maken van bestanden, het maken van mappen, het installeren van een aantal front-end bibliotheken

(Technische en ontwerptips)

UmbrellaJS is uw alternatief voor jQuery

De open source jQuery-bibliotheek domineert de webontwikkeling al jaren. Het is nog steeds een van de meest vertrouwde bronnen voor JavaScript, maar er is een nieuwe bibliotheek in de stad die UmbrellaJS heet.Umbrella is ook volledig open source en biedt veel van dezelfde functionaliteit, waaronder elementselectoren, DOM-manipulatie en AJAX-verzoeken

(Technische en ontwerptips)