MooTools - Sortables
Sortables è una funzionalità avanzata nello sviluppo web e può davvero aprire le opzioni con i progetti dell'interfaccia utente. Include anche una grande funzione chiamata "serialize" che gestisce un elenco di ID elemento ed è utile per lo scripting lato server.
Creazione di un nuovo oggetto ordinabile
Innanzitutto, inviamo l'elenco degli elementi a una variabile. Se desideri un array dell'elenco di elementi, assegna tutta la raccolta a una variabile. Infine, passa quella variabile a un costruttore ordinabile. Dai un'occhiata alla seguente sintassi per creare un oggetto ordinabile.
Sintassi
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);Di seguito è riportato il codice HTML per la sintassi.
Sintassi
<ul id = "listA">
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul id = "listB">
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>Opzione Sortables
Ordinabile fornisce diverse opzioni per personalizzare l'oggetto ordinabile. Cerchiamo di discutere le opzioni.
Vincola
Questa opzione determina se gli elementi dell'elenco possono saltare tra ul all'interno dell'oggetto ordinabile. Ad esempio, se hai due ul nell'oggetto ordinabile, puoi "constrain"gli elementi dell'elenco al loro genitore ul impostando"constrain: true". Dai un'occhiata alla seguente sintassi per l'impostazione del vincolo.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Clone
Questa opzione ti aiuta a creare un elemento clone sotto il cursore. Aiuta a ordinare gli elementi dell'elenco. Dai un'occhiata alla seguente sintassi per clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Maniglia
La maniglia è un'opzione che accetta un elemento di agire come la maniglia di trascinamento. Ciò è utile ogni volta che si desidera che gli elementi dell'elenco siano selezionabili o che si desideri eseguire azioni nell'elenco. Se non fornisci alcuna variabile, verrà considerata falsa per impostazione predefinita. Dai un'occhiata alla seguente sintassi per l'utilizzo di handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacità
Questa opzione ti consente di regolare l'elemento di ordinamento. Se usi un clone, l'opacità influisce sull'elemento che ordina.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Ripristina
Questa opzione accetta "false" o qualsiasi opzione Fx. Se imposti l'opzione Fx all'interno di ripristino, creerà un effetto per la sistemazione dell'elemento ordinato. Dai un'occhiata alla seguente sintassi per il ripristino.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
revert: false //this is the default
});
//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});Scatta
Questa opzione ti consente di vedere quanti px l'utente trascinerà il mouse prima che l'elemento inizi a seguire.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Eventi ordinabili
Sortable fornisce i seguenti eventi che sono piacevoli e diretti.
onStart - viene eseguito quando inizia il trascinamento (una volta che lo snap scatta)
onSort - viene eseguito quando gli articoli cambiano ordine
onComplete - viene eseguito quando si rilascia un elemento in posizione
Metodi ordinabili
I seguenti metodi ordinabili sono essenzialmente funzioni che appartengono a classi:
staccare ()
Con detach (), puoi "staccare" tutti gli handle correnti, rendendo l'intero oggetto elenco non ordinabile. Questo è utile per disabilitare l'ordinamento.
allegare ()
Questo metodo "attaccherà" le maniglie agli elementi di ordinamento, funziona per abilitare l'ordinamento dopo detach ().
addItems ()
Ciò ti consente di aggiungere nuovi elementi al tuo elenco ordinabile. Supponiamo che tu abbia un elenco ordinabile in cui l'utente può aggiungere un nuovo elemento, una volta aggiunto quel nuovo elemento, dovrai abilitare l'ordinamento su quel nuovo elemento.
removeItems ()
Questo metodo consente di rimuovere la capacità di ordinamento di un elemento all'interno di un elenco ordinabile. Ciò è utile quando si desidera bloccare un particolare elemento all'interno di un elenco specifico e non lasciarlo ordinare con altri.
addLists ()
Invece di aggiungere semplicemente un nuovo elemento a un elenco esistente, potresti voler aggiungere un elenco completamente nuovo all'oggetto ordinabile. Questo metodo ti consente di aggiungere più elenchi, rendendo davvero facile aggiungere più elementi selezionabili.
removeLists ()
Rimuoviamo gli elenchi dall'oggetto ordinabile. Ciò è utile quando si desidera bloccare un determinato elenco in posizione. È possibile rimuovere l'elenco, lasciando gli altri elenchi ancora nell'oggetto ordinabile, ma bloccando il contenuto dell'elenco rimosso.
serializzare ()
Tutto questo ordinamento è fantastico, ma cosa succede se vuoi fare qualcosa con i dati? .serialize (); restituirà un elenco degli ID degli elementi così come il loro ordine nell'elenco. È possibile scegliere da quale elenco ottenere i dati all'interno dell'oggetto in base al numero di indice.
Esempio
L'esempio seguente crea una matrice di elementi div con numerazione. Successivamente, riorganizzali facendo clic, trascina e rilascia le azioni utilizzando il puntatore del mouse. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
position: inherit;
}
ul#sortables {
width: 300px;
margin: 0;
padding: 0;
}
li.sortme {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
ul#sortables li {
margin: 10px 0;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
new Sortables($('test'), {
initialize: function(){
var step = 0;
this.elements.each(function(element, i) {
var color = [step, 82, 87].hsbToRgb();
element.setStyle('background-color', color);
step = step + 35;
element.setStyle('height', $random(40, 100));
});
}
});
});
</script>
</head>
<body>
<ul id = "test">
<li class = "sortme">0</li>
<li class = "sortme">1</li>
<li class = "sortme">2</li>
<li class = "sortme">3</li>
<li class = "sortme">4</li>
<li class = "sortme">5</li>
<li class = "sortme">6</li>
<li class = "sortme">7</li>
<li class = "sortme">8</li>
<li class = "sortme">9</li>
<li class = "sortme">10</li>
</ul>
</body>
</html>Riceverai il seguente output: