Velciet un nometiet, izmantojot jQuery lietotāja saskarni

Pirms praktisku piemēru izskatīšanas apskatīsim vilkšanas un nomešanas metodes, kas mums ir pieejamas jQuery lietotāja saskarnē.
1- vilkšanas metode ()
Velkamā metode pārvalda tos HTML lapas elementus, kurus vēlaties pārvietot, šo metodi var izmantot divos dažādos veidos:

 • $ (atlasītājs, konteksts). Vilkšana (opcijas) • $ (atlasītājs, konteksts). Vilkšana ("darbība", parametri) 

Apskatīsim piemēru:
Vispirms mums ir jāiekļauj nepieciešamie faili. Izplatīta kļūda ir jQuery lietotāja saskarnes .js iekļaušana pirms jQuery .js, atcerieties, ka jQuery ir kodols un jQuery UI ir tikai bibliotēkas, spraudņi, logrīki, kas bez jQuery netiks derētu.

Mēs izmantojam šo metodi:

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

Un mēs to saistām ar atlasītāju, kas ar to būs div.

Velciet mani apkārt

Šeit ir pilns avota kods:

 jQuery UI vilkšana - noklusējuma funkcionalitāte
Velciet mani apkārt

2- pilināmā () metode
Izlaišanas metode pārvalda HTML lapas elementus, kurus vēlaties ievietot apgabalā. Tāpat kā vilkšanas metodi, to var izmantot divos dažādos veidos:

 • $ (atlasītājs, konteksts) .droppable (opcijas) • $ (atlasītājs, konteksts) .droppable ("darbība", parametri) 

Apskatīsim piemēru tam:
Mēs iekļaujam failus, pievienojam stilus, izsaucam metodes (šeit mēs vienādi izmantosim vilkšanas metodi), kam seko izmetamā metode. Šeit ir avota kods:

 jQuery UI Droppable - noklusējuma funkcionalitāte
Velciet mani uz manu mērķi
Nometiet šeit

Un tas būtu mūsu rezultāts pārlūkprogrammā:

Ko darīt, ja mēs apvienotu abus jēdzienus sarežģītākā piemērā, piemēram, iepirkumu grozā? Paskatīsimies:
Vispirms mēs iekļaujam savus failus:

Mēs grozam pievienojam dažus stilus:

Mēs izmantosim arī akordeona () metodi no jQuery lietotāja saskarnes bibliotēkas, lai padarītu mūsu grozu pievilcīgāku, mēs izmantojam savas metodes un saistām tās ar atlasītājiem, šajā gadījumā mēs paplašināsim visas vilkšanas metodes funkcijas līdz sarakstam:

Un mūsu iepirkumu grozs izskatīsies šādi:

Lai to varētu pārbaudīt, šeit ir pilns avota kods:

 jQuery UI Droppable - iepirkumu groza demonstrācija
T-krekli

Lolcat krekls
Cheezeburger krekls
Buckit krekls


Somas

Zebra Striped
Melna āda
Aligatora āda


Sīkrīki

iPhone
iPod
iPad


Pievienojiet savus vienumus šeit

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu