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.

Voordelen van pen en papier voor het ontwerpen op computer

Vertel eens, wanneer was de laatste keer dat je met pen en papier schreef? Het is niet verrassend om te weten dat je ze zelden gebruikt, omdat we het digitale tijdperk ingaan wanneer technologieën zoals laptop en tablet over de hele wereld tot bloei komen. Het cruciale feit is echter dat het gebruik van pen en papier beslist efficiënter is dan het gebruik van de computer als het gaat om schetsen, schrijven, ontwerpen, elke activiteit waarbij brainstormen betrokken is !H

(Technische en ontwerptips)

Hoe Windows 10 "Verzenden naar" contextmenu aan te passen

De optie "Verzenden naar" in het contextmenu van Windows is verbazingwekkend nuttig, maar het is ook een van de meest onderschatte functies. Ik zal de lamme standaardvermeldingen de schuld geven voor het ontvangen van de koude schouder.Maar wat als u de optie "Verzenden naar" in het contextmenu kunt aanpassen, het zou u kunnen helpen om eenvoudig elk bestand naar uw gewenste locatie te sturen met slechts een klik, of zelfs bestanden in een bepaald programma te openen zonder tussen te hoeven springen verschillende locaties

(Technische en ontwerptips)