Hur man drar och tar bilder med JQuery UI

Vi ska visa ett exempel på hur man flyttar bilder runt en webbsida och fånga den i en div, för detta kommer vi att använda JQuery UI. Vi kommer använda dragbar Y droppable. Minimistilarna kommer att användas, denna handledning syftar inte till att ha en trevlig miljö för att testa det, utan snarare att se hur de kommenterade funktionerna fungerar. Koden har ingen större komplikation.

I exemplet ska vi ha ett par bilder och en div med en kant, målet är att flytta varje bild till div och att den fångar den, vi kommer att se koderna som börjar med HTML.

HTML -kod

Du kommer att uppskatta att HTML -koden är kort, precis vad som är nödvändigt, den viktiga delen av handledningen finns inte här.

 Drag  

I huvudavsnittet importerar vi den nödvändiga stilen, skriptet vi skapar och JQuery UI -skripten. I kroppen kan du helt enkelt lägga till 2 bilder och en div, div har ett id och bilderna med en klass, så att vi kan hantera dem i vårt manus.

CSS -kod

Som vi sa i början är stilar inte en prioritet, bara de som är nödvändiga för denna uppgif.webpt kommer att användas.

 #ram {bredd: 270px; minhöjd: 60px; marginal: auto; kant: 1px helt svart; vaddering: 5px; }. tappade {position: statisk! viktigt; } 

En kant läggs till div och den är centrerad, så vi kan se när den tar bilden. Den tappade klassen görs statisk, den här delen är den viktigaste, eftersom denna klass kommer att läggas till bilden när den fångas av div.

JQuery -kod

Vi kommer att lägga koden nedan för att senare förklara den.

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

Vi gör klassen flytta bilden draggable, som är klassen som läggs till våra bilder i HTML. Denna uppgif.webpt tillåter oss redan att flytta eller dra våra bilder runt sidan, men bara det, med den koden skulle den inte "fångas" ännu. För detta kommer vi att använda droppable i div med id bild, inom droppable gör vi att bilden i div lägger till den i den tappade klassen (kom ihåg CSS, utan den statiska positionen skulle det inte fungera bra) och senare läggs detta till som innehåll i div, för detta använder vi append.

Nu ska vi testa exemplet, i följande bild ser vi hur sidan börjar:

Att flytta en bild kommer att se ut så här:

Och slutligen när vi har de två bilderna i div, kommer "sidan" att se ut så här:

Det bör noteras att utseendet varierar något beroende på fönstrets storlek. Så långt har handledningen kommit, nu kan du öva och komplicera exemplet så mycket du vill.

NoteraOm du vill veta mer om JQuery UI besök deras sida. Du hittar fler möjligheter och du kommer att se exempel.