Come trascinare e catturare immagini con l'interfaccia utente di JQuery

Mostreremo un esempio di come spostare le immagini in una pagina web e catturarla in un div, per questo useremo l'interfaccia utente di JQuery. Noi useremo trascinabile sì droppabile. Verranno utilizzati gli stili minimi, questo tutorial non ha lo scopo di avere un bel ambiente per testarlo, ma piuttosto per vedere come funzionano le funzioni commentate. Il codice non ha grosse complicazioni.

Nell'esempio avremo un paio di immagini e un div con un bordo, l'obiettivo è spostare ogni immagine nel div e che lo catturi, vedremo i codici che iniziano con l'HTML.

codice HTML

Apprezzerai che il codice HTML è breve, proprio quello che è necessario, la parte importante del tutorial non si trova qui.

 Trascinare  

Nella sezione head importiamo lo stile necessario, lo script che creiamo e gli script dell'interfaccia utente di JQuery. Nel corpo, aggiungi semplicemente 2 immagini e un div, il div ha un id e le immagini con una classe, così possiamo gestirle nel nostro script.

Codice CSS

Come abbiamo detto all'inizio, gli stili non sono una priorità, verranno utilizzati solo quelli necessari per questo compito.

 #frame {larghezza: 270px; altezza minima: 60px; margine: automatico; bordo: 1px nero solido; imbottitura: 5px; } .dropped {posizione: statica!importante; } 

Un bordo viene aggiunto al div ed è centrato, così possiamo vedere quando cattura l'immagine. La classe rilasciata viene resa statica, questa parte è la più importante, poiché questa classe verrà aggiunta all'immagine quando viene catturata dal div.

Codice JQuery

Metteremo il codice qui sotto, per spiegarlo in seguito.

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

Facciamo la classe sposta l'immagine trascinabile, che è la classe aggiunta alle nostre immagini nell'HTML. Questo compito ci consente già di spostare o trascinare le nostre immagini nella pagina, ma solo questo, con quel codice non verrebbe ancora "catturato". Per questo useremo droppable nel div con id immagine, all'interno di droppable facciamo in modo che l'immagine che si trova nel div lo aggiunga alla classe drop (ricordate il CSS, senza la posizione statica non funzionerebbe bene) e successivamente questo viene aggiunto come contenuto del div, per questo usiamo append.

Ora andiamo a testare l'esempio, nell'immagine seguente vediamo come inizia la pagina:

Lo spostamento di un'immagine avrà questo aspetto:

E infine quando avremo le 2 immagini nel div, la "pagina" sarà simile a questa:

Va notato che a seconda delle dimensioni della finestra, l'aspetto varierà leggermente. Finora è arrivato il tutorial, ora puoi esercitarti e complicare l'esempio quanto vuoi.

NotaSe vuoi saperne di più sull'interfaccia utente di JQuery, visita la loro pagina. Troverai più possibilità e vedrai degli esempi.