Mes parodysime pavyzdį kaip perkelti vaizdus po tinklalapį ir jį sugauti div, tam mes naudosime JQuery UI. Mes naudosime tempiamas Y nuleidžiamas. Bus naudojami minimalūs stiliai, šioje pamokoje nesiekiama turėti gražios aplinkos ją išbandyti, o pamatyti, kaip veikia komentuojamos funkcijos. Kodas neturi didelių komplikacijų.
Pavyzdyje mes turėsime porą vaizdų ir skyrių su kraštu, tikslas yra perkelti kiekvieną vaizdą į div ir kad jis jį pagautų, pamatysime kodus, prasidedančius HTML.
HTML kodas
Jūs suprasite, kad HTML kodas yra trumpas, tik tai, kas būtina, svarbios pamokos dalies čia nerasite.
VilkitePagrindinėje dalyje importuojame reikiamą stilių, sukurtą scenarijų ir „JQuery“ vartotojo sąsajos scenarijus. Pagrinde tiesiog pridėkite 2 vaizdus ir div, div turi ID ir vaizdus su klase, kad galėtume juos tvarkyti pagal savo scenarijų.
CSS kodas
Kaip minėjome pradžioje, stiliai nėra prioritetas, bus naudojami tik tie, kurie reikalingi šiai užduočiai atlikti.
#frame {width: 270px; Min. aukštis: 60 pikselių; paraštė: auto; kraštinė: 1 taškas vientisa juoda; paminkštinimas: 5px; } .dropped {pozicija: statiška! svarbu; } Prie div pridedama kraštinė ir ji yra centre, todėl matome, kada ji užfiksuoja vaizdą. Kritusi klasė yra statiška, ši dalis yra svarbiausia, nes ši klasė bus pridėta prie vaizdo, kai ją užfiksuos div.
„JQuery“ kodas
Mes įdėsime kodą žemiau, kad vėliau paaiškintume.
$ (dokumentas) .ready (funkcija () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" nukrito "); $ (this) .append (ui.draggable);}});})Mes sudarome klasę perkelti vaizdą draggable, kuri yra klasė, pridėta prie mūsų vaizdų HTML. Ši užduotis jau leidžia mums perkelti ar vilkti vaizdus po puslapį, bet tik tai, kad su šiuo kodu jis dar nebūtų „užfiksuotas“. Tam mes naudosime droppable į div su id paveikslėlį, „droppable“ sistemoje padarome vaizdą, esantį div, ir įtraukiame jį į iškritusią klasę (nepamirškite CSS, be statinės padėties jis neveiks gerai), o vėliau tai pridedama kaip „div“ turinys, tam naudojame priedą.
Dabar mes išbandysime pavyzdį, šiame paveikslėlyje matome, kaip prasideda puslapis:
Vaizdo perkėlimas atrodys taip:
Ir pagaliau, kai turėsime 2 vaizdus div, „puslapis“ atrodys taip:
Reikėtų pažymėti, kad priklausomai nuo lango dydžio išvaizda šiek tiek skirsis. Iki šiol pamoka atėjo, dabar galite praktikuoti ir apsunkinti pavyzdį, kiek norite.
PastabaJei norite sužinoti daugiau apie „JQuery“ vartotojo sąsają, apsilankykite jų puslapyje. Rasite daugiau galimybių ir pamatysite pavyzdžių.
