Kā vilkt un satvert attēlus, izmantojot JQuery lietotāja saskarni

Mēs parādīsim piemēru kā pārvietot attēlus pa tīmekļa lapu un to noķert div, šim nolūkam mēs izmantosim JQuery UI. Mēs izmantosim vilkams Y nometams. Tiks izmantoti minimālie stili, šīs apmācības mērķis nav radīt jauku vidi, lai to pārbaudītu, bet gan redzēt, kā darbojas komentētās funkcijas. Kodam nav lielu sarežģījumu.

Šajā piemērā mums būs pāris attēli un divs ar apmali, mērķis ir pārvietot katru attēlu uz div un, lai tas to uztvertu, mēs redzēsim kodus, kas sākas ar HTML.

HTML kods

Jūs novērtēsit, ka HTML kods ir īss, tieši tas, kas nepieciešams, šeit nav atrodama apmācības svarīgā daļa.

 Velciet  

Galvenajā sadaļā mēs importējam nepieciešamo stilu, mūsu izveidoto skriptu un JQuery UI skriptus. Pamattekstā vienkārši pievienojiet 2 attēlus un div, div ir ID, un attēli ar klasi, lai mēs varētu tos apstrādāt mūsu skriptā.

CSS kods

Kā jau teicām sākumā, stili nav prioritāte, tiks izmantoti tikai šim uzdevumam nepieciešamie.

 #rāmis {platums: 270px; minimālais augstums: 60 pikseļi; piemale: auto; apmale: 1px vienmērīga melna; polsterējums: 5 pikseļi; } .dropped {position: static! svarīgi; } 

Divam tiek pievienota apmale, un tā ir centrēta, lai mēs varētu redzēt, kad tā uzņem attēlu. Izkritušā klase ir padarīta statiska, šī daļa ir vissvarīgākā, jo šī klase tiks pievienota attēlam, kad to noķers div.

JQuery kods

Mēs ievietojam kodu zemāk, lai vēlāk to izskaidrotu.

 $ (dokuments) .ready (funkcija () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" samazinājās "); $ (this) .append (ui.draggable);}});})

Mēs veidojam klasi pārvietot attēlu draggable, kas ir klase, kas pievienota mūsu attēliem HTML. Šis uzdevums jau ļauj mums pārvietot vai vilkt savus attēlus pa lapu, bet tikai tas, ka ar šo kodu tas vēl netiktu "notverts". Šim nolūkam mēs izmantosim droppable div ar id bilde, droppable ietvaros mēs liekam divā esošajam attēlam pievienot to nokritušajai klasei (atcerieties CSS, bez statiskās pozīcijas tas nedarbotos labi), un vēlāk tas tiek pievienots kā div saturs, šim nolūkam mēs izmantojam pielikumu.

Tagad mēs pārbaudīsim piemēru, nākamajā attēlā mēs redzam, kā lapa sākas:

Attēla pārvietošana izskatīsies šādi:

Un visbeidzot, kad mums būs divi attēli div, "lapa" izskatīsies šādi:

Jāatzīmē, ka atkarībā no loga izmēra izskats nedaudz atšķirsies. Līdz šim apmācība ir sasniegta, tagad jūs varat praktizēt un sarežģīt piemēru, cik vēlaties.

PiezīmeJa vēlaties uzzināt vairāk par JQuery lietotāja saskarni, apmeklējiet viņu lapu. Jūs atradīsit vairāk iespēju un redzēsit piemērus.