✅ Velciet un nometiet, izmantojot jQuery lietotāja saskarni

Satura rādītājs

T-krekli
Somas
Sīkrīki

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

Attēls nosūtīts

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ā:

Attēls nosūtīts

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:

Attēls nosūtīts

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