Kako povlačiti i hvatati slike pomoću JQuery korisničkog sučelja

Pokazat ćemo primjer kako premjestiti slike po web stranici i uhvatiti je u div, za to ćemo koristiti JQuery UI. Koristit ćemo vuče Y kapljivom. Koristit će se minimalni stilovi, ovaj vodič nema za cilj imati lijepo okruženje za testiranje, već radije vidjeti kako funkcioniraju komentirane funkcije. Kod nema većih komplikacija.

U primjeru ćemo imati nekoliko slika i div s obrubom, cilj je premjestiti svaku sliku u div i da je uhvati, vidjet ćemo kodove koji počinju s HTML -om.

HTML kod

Cijenit ćete da je HTML kôd kratak, samo ono što je potrebno, važni dio vodiča ovdje se ne nalazi.

 Opterećenje  

U odjeljak head uvozimo potrebni stil, skriptu koju stvaramo i JQuery UI skripte. U tijelo jednostavno dodajte 2 slike i div, div ima ID i slike s klasom, tako da ih možemo obraditi u našoj skripti.

CSS kod

Kao što smo rekli na početku, stilovi nisu prioritet, koristit će se samo oni potrebni za ovaj zadatak.

 #okvir {širina: 270px; min-visina: 60px; marža: auto; obrub: 1px puna crna; punjenje: 5px; } .pusti {position: static! important; } 

Obrubu se dodaje rub i on je centriran, tako da možemo vidjeti kada snima sliku. Odbačena klasa postaje statična, ovaj dio je najvažniji, jer će se ova klasa dodati na sliku kada je uhvati div.

JQuery kôd

Kôd ćemo staviti ispod, kako bismo ga kasnije objasnili.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" ispušteno "); $ (this) .append (ui.draggable);}});})

Mi činimo razred premjestiti sliku draggable, što je klasa dodana našim slikama u HTML -u. Ovaj nam zadatak već omogućuje premještanje ili povlačenje slika po stranici, ali samo to, s tim kodom još ne bi bilo "snimljeno". Za to ćemo koristiti divpable u div -u s id -om slika, unutar droppable -a napravimo da se slika koja se nalazi u div -u doda u ispuštenu klasu (zapamtite CSS, bez statičkog položaja ne bi dobro funkcionirao), a kasnije se to dodaje kao sadržaj div -a, za to koristimo append.

Sada ćemo testirati primjer, na sljedećoj slici vidimo kako stranica počinje:

Pomicanje slike izgledat će ovako:

I na kraju, kada imamo 2 slike u div -u, "stranica" će izgledati ovako:

Valja napomenuti da će ovisno o veličini prozora izgled malo varirati. Do sada je tutorial došao, sada možete vježbati i komplicirati primjer koliko god želite.

BilješkaAko želite saznati više o JQuery korisničkom sučelju, posjetite njihovu stranicu. Naći ćete više mogućnosti i vidjet ćete primjere.