Lag elementer på nettstedet ditt Draggable Med Draggabilly.js

Det er mange opplæringsprogrammer der ute på hvordan du gjør ting som kan trekkes i en nettside . jQuery er en av de enkleste måtene. Du trenger ikke engang jQuery brukergrensesnittet, bare en liten hjelp fra musepunktfunksjonen og kanskje noen valgfri håndtering. Men hva om du ikke vil røre noen jQuery-kode ennå, vil du fortsatt gjøre ting draggable? Da er draggabilly.js det riktige verktøyet for deg.

Med Draggabilly.js kan du gjøre hvilket som helst element på en nettside som kan trekkes. Du kan tilpasse oppførselen til det trekkbare elementet som å legge til rutenett, bindende hendelseslyttere til hendelser, begrense bevegelsene til bare x- eller y-aksen og mye mer. Den støtter også ulike nettlesere, IE8 + og til og med multi-touch mobile nettlesere.

Starter

For å komme i gang trenger du bare å inkludere Draggabilly.js- kilden til nettstedet ditt. Det er ikke behov for andre avhengigheter. Du kan hente filen fra GitHub.

Som for resten vil du jobbe med noe javascript-funksjon som nedenfor.

Grunnleggende dra

Du må inkludere følgende kodebrikke på siden din slik at slepingen kan fungere.

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

#idHere er det ID du bør legge inn i HTML-elementet du vil gjøre draggable. Mens du er i draggie variabelen, kan du sette inn et alternativ hvis du vil. Hvis du ikke trenger det alternativet, kan du også definere ID fra elem variabelen.

Hvis jeg for eksempel har et id med #demo uten noe valg, kan jeg skrive ut teksten som sådan:

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

Deretter inne i HTML-koden, ring IDen til elementet du ønsker, bli dreibart. Følgende er et grunnleggende eksempel.

 Dra meg 

Det er mange andre måter å påvirke Draggabilly sin oppførsel på. Du kan begrense at slepingen bare skal ligge i 'y' eller 'x' -aksen slik:

 ny Draggabilly ('# demo', {akse: 'x'}); 

Eller du kan legge til et håndteringsalternativ, som spesifiserer startelementet av dra-samhandlingen som:

 var elem = document.querySelector ('# demo'); Ny Draggabilly (Elem, {håndtak: '. Handle'}); 

Dette .handle alternativet er nyttig når alle indre elementer som innganger og skjemaer ikke trenger å være drabbare. Det er fortsatt mange andre alternativer du kan legge til som containments, grids, metoder og hendelser. Gå over til dragabbillys offisielle hjemmeside for å se full dokumentasjon.

Endelig tanke

Den slepende funksjonen har i de fleste tilfeller liten effekt på webdesign, men det er fortsatt ganske viktig. Det foregår oftest i webapps eller spill. Enkelheten i sin installasjon og ulike forskjellige slepsmetoder gjør dette til et veldig praktisk verktøy for å prøve ut.

Freebie: "Modern Business" Infographic Elements

Landskapet i virksomheten er i stadig endring, og det medfører også teknikk og markedsføringsteknikker. Mange flere bedrifter bruker infografisk kraft til virkelig å nå ut til deres målgruppe.Hvis du er en designer som gjør noe for bedrifter i alle former og størrelser, har du sannsynligvis fått noen gratis vektorer, PSDer og lignende fra Freepik. Tross a

(Tekniske og design tips)

Velge riktig JavaScript MVC Framework [Infographic]

Med webdesign og utvikling som utvikles raskt, de siste par årene, blir flere og flere nye verktøy introdusert med bedre tilnærminger for å legge til rette for en webutvikleres oppgave, verktøy som Vinkel, Ryggrad og Ember . Dette er noen få populære JavaScript-biblioteker som brukes til å bygge webapplikasjon ved hjelp av MVC-arkitektur. Det gj

(Tekniske og design tips)