Afbeeldingen slepen en pakken met JQuery UI

We gaan een voorbeeld laten zien van: hoe afbeeldingen over een webpagina te verplaatsen en deze te vangen in een div, hiervoor gaan we JQuery UI gebruiken. We zullen gebruiken sleepbaar Y dropbaar. De minimale stijlen zullen worden gebruikt, deze tutorial is niet bedoeld om een ​​mooie omgeving te hebben om het te testen, maar om te zien hoe de becommentarieerde functies werken. De code heeft geen grote complicatie.

In het voorbeeld hebben we een paar afbeeldingen en een div met een rand, het doel is om elke afbeelding naar de div te verplaatsen en dat deze deze vangt, we gaan de codes zien die beginnen met de HTML.

HTML code

U zult begrijpen dat de HTML-code kort is, precies wat nodig is, het belangrijkste deel van de tutorial is hier niet te vinden.

 Sleuren  

In de kopsectie importeren we de benodigde stijl, het script dat we maken en de JQuery UI-scripts. Voeg in de body eenvoudig 2 afbeeldingen en een div toe, de div heeft een id en de afbeeldingen met een klasse, zodat we ze in ons script kunnen verwerken.

CSS-code

Zoals we in het begin al zeiden, hebben stijlen geen prioriteit, alleen de stijlen die nodig zijn voor deze taak zullen worden gebruikt.

 #frame {breedte: 270px; min-hoogte: 60px; marge: automatisch; rand: 1px effen zwart; opvulling: 5px; } .dropped {positie: statisch! belangrijk; } 

Er wordt een rand aan de div toegevoegd en deze is gecentreerd, zodat we kunnen zien wanneer de afbeelding wordt vastgelegd. De gedropte klasse wordt statisch gemaakt, dit deel is het belangrijkste, aangezien deze klasse aan de afbeelding zal worden toegevoegd wanneer deze door de div wordt gevangen.

JQuery-code

We gaan de code hieronder plaatsen, om het later uit te leggen.

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

Wij maken de klas afbeelding verplaatsen draggable, wat de klasse is die aan onze afbeeldingen in de HTML is toegevoegd. Deze taak stelt ons al in staat om onze afbeeldingen over de pagina te verplaatsen of te slepen, maar alleen dat, met die code zou het nog niet worden "vastgelegd". Hiervoor gebruiken we droppable in de div met id afbeelding, binnen droppable laten we de afbeelding in de div toevoegen aan de gedropte klasse (onthoud de CSS, zonder de statische positie zou het niet goed werken) en later wordt dit toegevoegd als inhoud van de div, hiervoor gebruiken we append.

Nu gaan we het voorbeeld testen, in de volgende afbeelding zien we hoe de pagina begint:

Het verplaatsen van een afbeelding ziet er als volgt uit:

En als we ten slotte de 2 afbeeldingen in de div hebben, ziet de "pagina" er als volgt uit:

Opgemerkt moet worden dat, afhankelijk van de grootte van het venster, het uiterlijk enigszins zal variëren. Tot nu toe is de tutorial gekomen, nu kun je het voorbeeld zo veel oefenen en compliceren als je wilt.

OpmerkingAls je meer wilt weten over JQuery UI, bezoek dan hun pagina. U vindt meer mogelijkheden en u ziet voorbeelden.