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.

5 gratis Android Apps for mer produktive møter og presentasjoner - Best Of

Møter kan ikke alltid være produktive, men de er essensielle onde som holder girene på kontoret oljet og løper jevnt. Hvis du trenger hjelp til å skape et mer organisert, effektivt og effektivt møte eller presentasjon, vil dette innlegget være litt hjelp.Vi har i dag 5 flotte Android-apper som kan hjelpe med samarbeid, holde alle på samme side, dele filer og viktige dokumenter samt webkonferanser. Best a

(Tekniske og design tips)

20 Detaljerte UI Concept Sketches + Klar design for din inspirasjon

En skisse er et skjelett av en ide som kom til å være opprinnelig som en tanke. Mens vi pleide å gjøre det for hånd, og på papir, kan det skape forskjellige mock-ups og skisser i disse dager digitalt via forskjellige applikasjoner. Mens mange designere og kunstnere går med tiden og gjør skissene sine på datamaskiner, foretrekker et stort antall reklamer fortsatt å trekke for hånd.Det er flo

(Tekniske og design tips)