Dra og slipp med jQuery UI

Før vi går med noen praktiske eksempler, la oss ta en titt på Drag and Drop -metodene som jQuery UI har for oss.
1- Dragbar metode ()
Dra -metoden administrerer elementene på en HTML -side du vil flytte, denne metoden kan brukes på to forskjellige måter:

 • $ (velger, kontekst) .draggable (alternativer) • $ (velger, kontekst) .draggable ("handling", params) 

La oss se et eksempel:
Først må vi inkludere de nødvendige filene, en vanlig feil som gjøres er å inkludere jQuery UI .js før jQuery .js, husk at jQuery er kjernen og jQuery UI er bare biblioteker, plugins, widgets, som uten jQuery ikke vil ville fungere.

Vi påberoper oss metoden:

 $ (function () {$ ("#draggable") .draggable ();}); 

Og vi knytter det til velgeren som vil være div med det.

Dra meg rundt

Her er den komplette kildekoden:

 jQuery UI Draggable - Standardfunksjonalitet
Dra meg rundt

2- droppable () metode
Den droppable metoden administrerer elementene på en HTML -side som du vil slippe inn i et område. I likhet med dragbar -metoden kan den brukes på to forskjellige måter:

 • $ (velger, kontekst). Droppable (alternativer) • $ (velger, kontekst). Droppable ("handling", params) 

La oss se på et eksempel på dette:
Vi inkluderer filene, vi legger til stilene, vi påkaller metodene (her bruker vi draggable -metoden likt) etterfulgt av droppable -metoden. Her er kildekoden:

 jQuery UI Droppable - Standardfunksjonalitet
Dra meg til målet mitt
Slipp her

Og dette vil være vår produksjon i nettleseren:

Hva om vi setter begge begrepene sammen i et mer komplisert eksempel, noe som en handlevogn? La oss se:
Først inkluderer vi filene våre:

Vi legger til noen stiler i handlekurven vår:

Vi vil også bruke trekkspill () -metoden fra jQuery UI -biblioteket for å gjøre handlekurven vår mer attraktiv, vi påkaller metodene våre og knytter dem til velgerne, i dette tilfellet vil vi utvide all funksjonaliteten til dragbar -metoden til en liste:

Og slik vil handlevognen vår se ut:

Slik at du kan teste det, her er den komplette kildekoden:

 jQuery UI Droppable - Handlekurvdemo
T-skjorter

Lolcat skjorte
Cheezeburger skjorte
Buckit skjorte


Vesker

Zebra Striped
Svart lær
Alligator Leather


Dingser

iPhone
iPod
iPad


Legg til varene dine her

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng