Hvordan dra og ta bilder med JQuery UI

Vi skal vise et eksempel på hvordan flytte bilder rundt på en webside og fange den i en div, for dette skal vi bruke JQuery UI. Vi vil bruke drabar Y droppable. Minimumsstiler vil bli brukt. Denne opplæringen tar ikke sikte på å ha et fint miljø for å teste det, men heller å se hvordan de kommenterte funksjonene fungerer. Koden har ingen større komplikasjon.

I eksemplet skal vi ha et par bilder og en div med en kant, målet er å flytte hvert bilde til div og at det fanger det, vi skal se kodene som starter med HTML.

HTML -kode

Du vil sette pris på at HTML -koden er kort, akkurat det som er nødvendig, den viktige delen av opplæringen finnes ikke her.

 Dra  

I hodeseksjonen importerer vi den nødvendige stilen, skriptet vi lager og JQuery UI -skriptene. I kroppen kan du bare legge til 2 bilder og en div, div har en id og bildene med en klasse, slik at vi kan håndtere dem i skriptet vårt.

CSS -kode

Som vi sa i begynnelsen, er stiler ikke en prioritet, bare de som er nødvendige for denne oppgaven vil bli brukt.

 #frame {bredde: 270px; min-høyde: 60px; margin: auto; kant: 1px solid svart; polstring: 5px; } .dropped {posisjon: statisk! viktig; } 

En kant blir lagt til div og den er sentrert, slik at vi kan se når den fanger bildet. Den droppede klassen blir gjort statisk, denne delen er den viktigste, siden denne klassen vil bli lagt til bildet når den blir fanget opp av div.

JQuery -kode

Vi skal sette koden nedenfor, for senere å forklare den.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" droppet "); $ (dette) .append (ui.draggable);}});})

Vi gjør klassen flytte bildet draggable, som er klassen som er lagt til bildene våre i HTML. Denne oppgaven lar oss allerede flytte eller dra bildene våre rundt siden, men bare det, med den koden ville den ikke blitt "fanget" ennå. For dette vil vi bruke droppable i div med id bilde, innen droppable får vi bildet som ligger i div til å legge det til den droppede klassen (husk CSS, uten den statiske posisjonen ville det ikke fungert bra) og senere blir dette lagt til som innhold i div, for dette bruker vi append.

Nå skal vi teste eksemplet, i det følgende bildet ser vi hvordan siden starter:

Å flytte et bilde vil se slik ut:

Og til slutt når vi har de 2 bildene i div, vil "siden" se slik ut:

Det bør bemerkes at utseendet vil variere noe avhengig av vinduets størrelse. Så langt har opplæringen kommet, nå kan du øve og komplisere eksemplet så mye du vil.

MerkHvis du vil vite mer om JQuery UI, kan du besøke siden deres. Du vil finne flere muligheter, og du vil se eksempler.