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.

Basisgids voor een betere e-commerce-ervaring

Bij het ontwerpen van e-commerce websites gaat het om meer dan alleen het maken van pagina's die bezoekers trekken. Dat is natuurlijk belangrijk, maar hoe uw website klanten behandelt zodra ze op een pagina zijn aangekomen, is even belangrijk.U wilt de juiste tools voor de klus, en u moet weten hoe u ze het best kunt toepassen, terwijl u niet alleen probeert om hun aankopen te beveiligen, maar ook om hun lidmaatschap en merkloyaliteit te behouden

(Technische en ontwerptips)

7 tips om afbeeldingen te beheren in uw Photoblog

Je houdt van fotografie en je hebt een blog, dus waarom niet beide samenvoegen? Bloggen is een van de beste manieren om een ​​geweldige uitstraling en reputatie voor uw bedrijf te creëren en om uw nieuwste en beste werk online weer te geven. Natuurlijk kunt u gebruikmaken van stockfoto's en Creative Commons-materialen in plaats van uw eigen afbeeldingen te gebruiken.Aan

(Technische en ontwerptips)