Hvordan å gjøre noe Drabare i jQuery

June 23

Å gjøre et element på en webside flytt legger bruker interaktivitet til dine design, og kan øke et nett "wow" -faktor. Denne funksjonen er enkelt å legge til hvis du installerer jQuery UI, eller brukergrensesnitt, til websidene. JQuery UI er en add-on til jQuery, Javascript bibliotek skrevet med designere i tankene. Denne add-on kommer med en rekke interaktivitet funksjoner, blant annet "flyttbare ()" for flyttbare elementer. Når du får komfortabel med å bruke denne og andre jQuery funksjoner, kan du lage interaktive webapplikasjoner ved å kombinere dem.

Bruksanvisning

1 Sjekk at koden inneholder en referanse til jQuery biblioteket filen. Legg denne koden på innsiden av "<head>" koder på websiden din hvis du ikke finner det allerede er der:

2 Tilsett jQuery UI biblioteket til webside:

Denne koden går etter jQuery biblioteket referanse og legger til det brukerinteraksjoner som å dra, slippe og sortering.

3 Start script med en funksjon for å se etter når siden er ferdig lastet:

$ (Funksjon () {

});

</ Script>

Dette eksemplet bruker en kort-hånd versjon av "$ (document) .ready ()". Plasser alle dine jQuery script kode mellom klammeparentes av denne funksjonen.

4 Bla nedover i HTML-koden og se etter en div eller et annet element som du ønsker å gjøre flyttbare. Kodene som skaper dette elementet trenger ID-navn, slik at du kan referere til dem i skriptet:

Dette er en div med en ID navnet "dragme."

</ Div>

Få navnet ID for elementet og gå tilbake til hodet av HTML-koden for å fortsette å skrive manuset.

5 Target elementet ved sin ID navn ved hjelp av en jQuery velgeren. Disse velgere etterligne CSS velgere. I CSS, er velgeren "#dragme" uten anførselstegn. I jQuery, pakk velgere i parentes og apostrof, innledes med et dollartegn:

$ ( '# Dragme')

6 Tilføye "flyttbare ()" -funksjonen til jQuery velgeren:

. $ ( '# Dragme') flyttbare ();

Av seg selv, den "flyttbare ()" -funksjonen gjør bare et element flytt på skjermen.

7 Begrense flyttbare element i en container ved å pakke sine HTML-koder i "<div>" koder og redigere "flyttbare ()" funksjon:

$ ( '# Dragme') flyttbare ({containment: 'foreldre'}).;

8 Begrense bevegelsen av flyttbare element til horisontal eller vertikal:

$ ( '# Dragme-UpDown') flyttbare ({akse: 'y'}).;

$ ( '# Dragme-rightleft') flyttbare ({akse: 'x'}).;

Y-aksen representerer fallverdier, mens x-aksen representerer horisontale verdier.

Hint

Bruk "flyttbare ()" i forbindelse med "droppable ()" for å skape dra-og-slipp-effekter på websidene.