Sådan trækker og tager du billeder med JQuery UI

Vi vil vise et eksempel på hvordan man flytter billeder rundt på en webside og fanger den i en div, til dette vil vi bruge JQuery UI. Vi vil bruge trækkelig Y droppable. De mindste stilarter vil blive brugt, denne vejledning sigter ikke mod at have et godt miljø til at teste det, men snarere at se, hvordan de kommenterede funktioner fungerer. Koden har ingen større komplikation.

I eksemplet skal vi have et par billeder og en div med en kant, målet er at flytte hvert billede til div, og at det fanger det, vi kommer til at se koderne, der starter med HTML.

HTML -kode

Du vil forstå, at HTML -koden er kort, lige hvad der er nødvendigt, den vigtige del af selvstudiet findes ikke her.

 Træk  

I hovedafsnittet importerer vi den nødvendige stil, det script vi opretter og JQuery UI -scriptene. I kroppen skal du blot tilføje 2 billeder og en div, div har et id og billederne med en klasse, så vi kan håndtere dem i vores script.

CSS -kode

Som vi sagde i begyndelsen, er stilarter ikke en prioritet, kun de nødvendige til denne opgave vil blive brugt.

 #frame {bredde: 270px; min-højde: 60px; margen: auto; kant: 1px solid sort; polstring: 5px; } .droppet {position: statisk! vigtig; } 

En ramme tilføjes div, og den er centreret, så vi kan se, hvornår den fanger billedet. Den tabte klasse gøres statisk, denne del er den vigtigste, da denne klasse tilføjes billedet, når den fanges af div.

JQuery -kode

Vi vil lægge koden herunder for senere at forklare den.

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

Vi gør klassen flytte billede draggable, som er klassen tilføjet til vores billeder i HTML. Denne opgave giver os allerede mulighed for at flytte eller trække vores billeder rundt på siden, men kun det, med den kode ville den ikke blive "fanget" endnu. Til dette vil vi bruge droppable i div med id billede, inden for droppable får vi billedet placeret i div til at tilføje det til den droppede klasse (husk CSS, uden den statiske position ville det ikke fungere godt) og senere tilføjes dette som indhold i div, til dette bruger vi append.

Nu skal vi teste eksemplet, i det følgende billede ser vi, hvordan siden starter:

Flytning af et billede vil se sådan ud:

Og endelig når vi har de 2 billeder i div, vil "siden" se sådan ud:

Det skal bemærkes, at udseendet vil variere lidt afhængigt af vinduets størrelse. Indtil videre er vejledningen kommet, nu kan du øve og komplicere eksemplet så meget du vil.

BemærkHvis du vil vide mere om JQuery UI, kan du besøge deres side. Du finder flere muligheder, og du vil se eksempler.