September 29
Fare un elemento in una pagina Web trascinabili aggiunge interattività con l'utente per i vostri disegni, e può aumentare fattore "wow" di un sito web. Questa funzione è semplice da aggiungere se si installa jQuery UI, o l'interfaccia utente, per le pagine Web. JQuery UI è un add-on per jQuery, la libreria JavaScript scritto con designer in mente. Questo add-on viene fornito con una varietà di funzioni di interattività, tra cui "() trascinabili" per gli elementi trascinabili. Una volta arrivati agio con questa e altre funzioni di jQuery, è possibile creare applicazioni Web interattive mediante la combinazione di essi.
1 Verificare che il codice include un riferimento al file della libreria jQuery. Aggiungere questo codice all'interno del "<head>" tag della pagina Web, se non si trova già lì:
<Script type = "text / javascript"> </ script>
2 Aggiungere la libreria jQuery UI alla tua pagina web:
<Script type = "text / javascript"> </ script>
Questo codice va dopo il riferimento alla libreria jQuery e aggiunge ad essa le interazioni degli utenti, come il trascinamento, lasciando cadere e l'ordinamento.
3 Inizia lo script di una funzione per verificare il caricamento quando la pagina è finito:
<Script>
$ (Function () {
});
</ Script>
Questo esempio utilizza una versione breve mano di "(document) .ready $ ()". Mettere tutto il codice di script jQuery tra le parentesi graffe di questa funzione.
4 Scorrere verso il basso nel codice HTML e cercare un div o un altro elemento che si desidera rendere trascinabili. I tag che creano questo elemento hanno bisogno di nomi di identificazione in modo da poterli fare riferimento nello script:
<Div id = "dragme">
Si tratta di un div con un nome ID di "dragme."
</ Div>
Ottenere il nome ID per l'elemento e tornare alla testa del vostro codice HTML per continuare a scrivere la sceneggiatura.
5 Obiettivo l'elemento con il suo nome ID utilizzando un selettore jQuery. Questi selettori imitano selettori CSS. In CSS, il selettore è "#dragme" senza le virgolette. In jQuery, avvolgere selettori tra parentesi e virgolette singole, preceduti dal simbolo del dollaro:
$ ( '# Dragme')
6 Aggiungere la funzione "trascinabile ()" per il selettore jQuery:
. $ ( '# Dragme') trascinabili ();
Di per sé, la funzione "trascinabile ()" fa solo un elemento trascinabili sullo schermo.
7 Vincolare l'elemento trascinabile all'interno di un contenitore avvolgendo i suoi tag HTML in "<div>" tag e modificare il ") trascinabile (" la funzione:
$ ( '# Dragme') trascinabili ({contenimento: 'genitore'}).;
8 Limitare il movimento della voce draggable a orizzontale o verticale:
$ ( '# Dragme-updown') trascinabili ({asse: 'y'}).;
$ ( '# Dragme-rightleft') trascinabili ({asse: 'x'}).;
L'asse y rappresenta valori verticali, mentre l'asse x rappresenta valori orizzontali.