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.

Slik løser du ødelagt Windows-system med System File Checker

Det kommer en tid i alle Windows-brukerens liv når deres dyrebare maskin blir skadet uansett grunn. Når det skjer, kommer brukeren til å løse problemer som BSOD, feilmeldinger og jevne krasjer.Mens de fleste ville tenke på å omformatere og reinstallere sin kopi av Windows, viser det seg at det er enda en måte at operativsystemet ditt kan reddes . Nevnt

(Tekniske og design tips)

14 Verktøy for å redusere Javascript

Javascript-reduksjon er en teknikk som kondenserer skriptet til et mye mindre fotavtrykk . Du mister menneskelig lesbarhet, men du sparer betydelig båndbredde - til slutt er Javascript ment for nettleseren din, ikke for brukerne .De fleste produksjonsnettsteder bruker Javascript-bekreftelse, men måten dette oppnås varierer sterkt. F

(Tekniske og design tips)