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.

20 nettsteder for å lytte og dele musikk gratis

Lytte til musikk har blitt en integrert del av våre liv . Vi lytter til musikken under pendler, daglige løp, når vi prøver å slappe av, eller når vi bare vil holde tritt med våre avguderes nyeste melodier. I disse dager har vi mange måter å lytte til musikk på nettet, og hvis du leter etter noe godt å høre på en av dine favoritt trender, er dette innlegget du skal lese.Her er 20 ne

(Tekniske og design tips)

4 AdBlock Plus-alternativer for Chrome

Ad blokkere er veldig enkle verktøy. Installer den i nettleseren din, og et stort antall annonser vil ikke lenger plage deg på noen måte, form eller form. Nyttig, selv om de kan være, er det noen som føler at ad blokkere er litt kjedelig .Hvis du er en av dem som foretrekker en ganske interessant annonseblokkering, og hvis nettleseren din er Google Chrome, så er det fire annonseblokkere som kommer med en unik vri.CatBl

(Tekniske og design tips)