Gli utenti delle applicazioni Web hanno probabilmente visto trovabile e ordinabili liste molte volte senza accorgersene. Nella schermata "Widget" all'interno di WordPress, dove gli utenti possono trascinare il widget nella sidebar e quindi ri-ordinarle è un posto notevole in cui vengono visualizzati. JQuery UI o interfaccia utente è un'estensione di jQuery che aggiunge questa funzionalità per siti Web. Una volta che si installa sia jQuery e jQuery UI, è possibile utilizzare la funzione di pre-costruito "sortable()" per fare due scatole ordinabile e collegarli.

Istruzioni

1

Aprire una pagina Web in blocco note o un editor di codice e aggiungere questi tag "< script >" sopra il tag di chiusura "< / head >":

< script tag Aggiungi file JavaScript esterni ospitati sui server di Google. Avete bisogno di questo codice per ottenere la libreria jQuery e l'estensione dell'interfaccia utente jQuery incorporato nella pagina Web.

2

Andare giù per il tag "< body >" della pagina Web e aggiungere due div con div nidificati come molti come necessario:

< div id = "sortme1" class = "connesso" >

< div > 1 elemento < / div >

< div > 2 elemento < / div >

< div > 3 elemento < / div >

< div > 4 elemento < / div >

< / div >

< div id = "sortme2" class = "connesso" >

< / div >

Il secondo div è vuoto, perché questa è la scatola dove potrete rilasciare gli elementi e ordinarli.

3

Aggiungere alcuni stili tra tag "< style >" nella sezione head del codice HTML:

sortme1, sortme2 () {

float: left;

}

sortme1 div, div # sortme2 {

Larghezza: 100px;

Altezza: 20px;

padding: 10px;

margin: 10px;

background: #555;

colore: #fff;

list-style: none;

}

sortme2 () {

Larghezza: 200px;

Altezza: 300px;

padding: 10px;

margin: 10px;

Priorità bassa: #eee;

}

Questi stili di posizione e colore le voci elenco trascinabili e la casella droppable.

4

Avviare lo script con una funzione per il controllo al termine della pagina di caricamento nel browser:

< script type = "text/javascript" >

$(function() () {

});

< / script >

Scrivere il resto dello script tra le parentesi graffe mostrato nell'esempio precedente.

5

Selezionare entrambi gli elenchi non ordinati ed e associare la funzione di "sortable()". Aggiungi "connectWith: 'verbali'" all'interno "sortable()" per collegare i due elenchi. Terminare la funzione con "disableSelection()" così gli utenti non possono evidenziare testo negli elementi, che a volte rende più difficile per fare clic e trascinare:

$('#sortme1, #sortme2') .sortable({

connectWith: '.connectedSortable'

.disableSelection()});