Cum să trageți și să luați imagini cu UI JQuery

Vom arăta un exemplu de cum să mutați imagini în jurul unei pagini web și să o prindeți într-o div, pentru aceasta vom folosi JQuery UI. Noi vom folosi glisabil Da droppable. Se vor folosi stilurile minime, acest tutorial nu are ca scop să aibă un mediu plăcut pentru a-l testa, ci mai degrabă pentru a vedea cum funcționează funcțiile comentate. Codul nu are nicio complicație majoră.

În exemplu, vom avea câteva imagini și un div cu un chenar, obiectivul este de a muta fiecare imagine în div și că o prinde, vom vedea codurile începând cu HTML.

Cod HTML

Veți aprecia că codul HTML este scurt, doar ceea ce este necesar, partea importantă a tutorialului nu se găsește aici.

 Trage  

În secțiunea head importăm stilul necesar, scriptul pe care îl creăm și scripturile JQuery UI. În corp, pur și simplu adăugați 2 imagini și un div, div are un id și imaginile cu o clasă, astfel încât să le putem gestiona în scriptul nostru.

Cod CSS

După cum am spus la început, stilurile nu sunt o prioritate, vor fi folosite doar cele necesare acestei sarcini.

 #frame {width: 270px; înălțime min: 60 px; margine: auto; chenar: 1px negru solid; umplutură: 5 px; }. picurat {poziție: static! important; } 

O margine este adăugată divului și este centrată, astfel încât să putem vedea când captează imaginea. Clasa abandonată este făcută statică, această parte este cea mai importantă, deoarece această clasă va fi adăugată la imagine atunci când este capturată de div.

Cod JQuery

Vom pune codul de mai jos, pentru a-l explica mai târziu.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" a scăzut "); $ (this) .append (ui.draggable);}});})

Facem clasa mutați imaginea glisabil, care este clasa adăugată imaginilor noastre în HTML. Această sarcină ne permite deja să mișcăm sau să ne tragem imaginile în jurul paginii, dar numai că, cu acel cod nu ar fi „capturat” încă. Pentru aceasta vom folosi droppable în div cu id imagine, în cadrul droppable facem ca imaginea situată în div să o adăugăm la clasa drop (amintiți-vă de CSS, fără poziția statică nu ar funcționa bine) și ulterior aceasta este adăugată ca conținut al div, pentru aceasta folosim append.

Acum vom testa exemplul, în următoarea imagine vedem cum începe pagina:

Mutarea unei imagini va arăta astfel:

Și, în sfârșit, când avem cele 2 imagini în div, „pagina” va arăta astfel:

Trebuie remarcat faptul că, în funcție de dimensiunea ferestrei, aspectul va varia ușor. Până acum a venit tutorialul, acum puteți exersa și complica exemplul cât doriți.

NotăDacă doriți să aflați mai multe despre UI JQuery vizitați pagina lor. Veți găsi mai multe posibilități și veți vedea exemple.