Vilkite ir numeskite naudodami „jQuery“ vartotojo sąsają

Prieš pradėdami naudoti keletą praktinių pavyzdžių, pažvelkime į „drag and drop“ metodus, kuriuos mums siūlo „jQuery“ vartotojo sąsaja.
1- vilkimo metodas ()
Vilkimo metodas tvarko norimus perkelti HTML puslapio elementus, šį metodą galima naudoti dviem skirtingais būdais:

 • $ (parinkiklis, kontekstas). Vilkti (parinktys) • $ (parinkiklis, kontekstas). Vilkti („veiksmas“, parametrai) 

Pažiūrėkime pavyzdį:
Pirmiausia turime įtraukti reikiamus failus, dažniausiai pasitaikanti klaida yra įtraukti „jQuery“ vartotojo sąsają .js prieš „jQuery .js“, atminkite, kad „jQuery“ yra pagrindinė, o „jQuery“ vartotojo sąsaja yra tik bibliotekos, papildiniai, valdikliai, kurie be „jQuery“ nebus veiktų.

Mes siūlome metodą:

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

Ir mes jį susiejame su selektoriumi, kuris bus su juo.

Vilk mane

Čia yra visas šaltinio kodas:

 „jQuery“ vartotojo sąsaja „Draggable“ - numatytoji funkcija
Vilk mane

2- nuleidžiamas () metodas
Metamasis metodas tvarko HTML puslapio elementus, kuriuos norite perkelti į sritį. Kaip ir vilkimo metodas, jis gali būti naudojamas dviem skirtingais būdais:

 • $ (parinkiklis, kontekstas). Nuleidžiamas (parinktys) • $ (parinkiklis, kontekstas). Nuleidžiamas („veiksmas“, parametrai) 

Pažvelkime į pavyzdį:
Įtraukiame failus, pridedame stilių, iškviečiame metodus (čia vienodai naudosime vilkimo metodą), po to seka metamasis metodas. Čia yra šaltinio kodas:

 „jQuery UI Droppable“ - numatytoji funkcija
Nuvilkite mane į tikslą
Nusileisk čia

Ir tai būtų mūsų rezultatas naršyklėje:

Ką daryti, jei abi sąvokas sujungtume į sudėtingesnį pavyzdį, pvz., Pirkinių krepšelį? Pažiūrėkime:
Pirmiausia įtraukiame savo failus:

Į krepšelį įtraukiame keletą stilių:

Mes taip pat naudosime akordeono () metodą iš „jQuery“ vartotojo sąsajos bibliotekos, kad mūsų krepšelis taptų patrauklesnis, mes pasinaudojame savo metodais ir susiejame juos su parinkikliais, šiuo atveju visas įtraukimo metodo funkcijas išplėsime į sąrašą:

Ir taip atrodytų mūsų pirkinių krepšelis:

Kad galėtumėte jį išbandyti, čia yra visas šaltinio kodas:

 „jQuery UI Droppable“ - pirkinių krepšelio demonstracija
Marškinėliai

„Lolcat“ marškinėliai
„Cheezeburger“ marškinėliai
„Buckit“ marškinėliai


Krepšiai

Zebra dryžuotas
Juoda oda
Aligatoriaus oda


Programėlės

„iPhone“
„iPod“
„iPad“


Pridėkite savo daiktus čia

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką