Nwlapcug.com


Come fare qualcosa trascinabili in jQuery

Rendere un elemento in una pagina Web trascinabile aggiunge interattività dell'utente per i vostri disegni e può aumentare il fattore "wow" di un sito Web. Questa funzionalità è semplice aggiungere se si installa jQuery UI, o l'interfaccia utente, alle pagine Web. JQuery UI è un plugin per jQuery, la libreria JavaScript scritta con designer in mente. Questo componente aggiuntivo viene fornito con una varietà di funzioni di interattività, tra cui "draggable()" per elementi trascinabili. Una volta arrivati a suo agio con questa e altre funzioni di jQuery, è possibile creare applicazioni Web interattive combinandoli.

Istruzioni

1

Verifica che il codice include un riferimento al file della libreria jQuery. Se non troverete già lì, aggiungere questo codice all'interno dei tag "< head >" della tua pagina Web:

< script type = "text/javascript" >< / script >

2

Aggiungere la libreria di jQuery UI al vostro Web page:

< script type = "text/javascript" >< / script >

Questo codice va dopo il riferimento alla libreria jQuery e aggiunge ad essa delle interazioni utente quali il trascinamento, rilascio e l'ordinamento.

3

Avviare lo script con una funzione per verificare quando la pagina è completato il caricamento:

< script >

$(function() () {

});

< / script >

Questo esempio viene utilizzata una versione breve mano di "$(document).ready()". Inserire 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 altro elemento che si desidera rendere trascinabile. I tag che creano questo elemento bisogno ID nomi così è possibile fare riferimento li nello script:

< div id = "dragme" >

Si tratta di un div con un nome di ID di "dragme."

< / div >

Ottenere il nome di ID per l'elemento e tornare alla testa del tuo codice HTML per continuare a scrivere lo script.

5

Destinazione l'elemento con il nome di ID utilizzando un selettore di jQuery. Questi selettori imitano selettori CSS. In CSS, il selettore è "#dragme" senza le virgolette. In jQuery, avvolgere selettori in parentesi e virgolette singole, precedute da un segno di dollaro:

$('#dragme')

6

Aggiungere la funzione di "draggable()" per il selettore di jQuery:

$('#dragme').draggable();

Di per sé, la funzione di "draggable()" solo rende un elemento trascinabile sullo schermo.

7

Vincolare l'elemento trascinabile all'interno di un contenitore avvolgendo i tag HTML nel tag "< div >" e modificando la funzione di "draggable()":

$('#dragme').draggable ({contenimento: 'parent'});

8

Consentire il movimento dell'elemento trascinabile orizzontale o verticale:

$('#dragme-updown').draggable ({asse: 'y'});

$('#dragme-rightleft').draggable ({asse: 'x'});

L'asse y rappresenta valori verticali, mentre l'asse x rappresenta valori orizzontali.

Consigli & Avvertenze

  • Utilizzare "draggable()" in collaborazione con "droppable()" per creare effetti di drag-and-drop sulle tue pagine Web.