MooTools - Clasificables
Sortables es una función avanzada en el desarrollo web y realmente puede abrir las opciones con sus diseños de interfaz de usuario. También incluye una gran función llamada "serializar" que administra una lista de identificadores de elementos y es útil para la creación de scripts del lado del servidor.
Crear un nuevo objeto clasificable
Primero, enviamos la lista de elementos a una variable. Si desea una matriz de la lista de elementos, asigne toda la colección a una variable. Y, finalmente, pase esa variable a un constructor ordenable. Eche un vistazo a la siguiente sintaxis para crear un objeto ordenable.
Sintaxis
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);El siguiente es el código HTML para la sintaxis.
Sintaxis
<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>Opción clasificables
Sortable ofrece diferentes opciones para personalizar el objeto clasificable. Analicemos las opciones.
Constreñir
Esta opción determina si los elementos de la lista pueden saltar entre uls dentro del objeto ordenable. Por ejemplo, si tiene dos uls en el objeto ordenable, puede "constrain"los elementos de la lista a su ul principal estableciendo"constrain: true". Eche un vistazo a la siguiente sintaxis para configurar la restricción.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Clon
Esta opción le ayuda a crear un elemento de clonación debajo del cursor. Ayuda a ordenar los elementos de la lista. Eche un vistazo a la siguiente sintaxis para clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Encargarse de
El controlador es una opción que acepta un elemento para que actúe como controlador de arrastre. Esto es útil siempre que desee que los elementos de su lista se puedan seleccionar o desee realizar acciones en su lista. Si no proporciona ninguna variable, se considerará falsa de forma predeterminada. Eche un vistazo a la siguiente sintaxis para usar handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacidad
Esta opción le permite ajustar el elemento de clasificación. Si usa un clon, la opacidad afecta al elemento que ordena.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Revertir
Esta opción acepta "falso" o cualquier opción de Fx. Si configura la opción Fx dentro de revertir, creará un efecto para que el elemento ordenado se asiente en su lugar. Eche un vistazo a la siguiente sintaxis para revertir.
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
}
});Chasquido
Esta opción le permite ver cuántos px el usuario arrastrará el mouse antes de que el elemento comience a seguir.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Eventos clasificables
Sortable proporciona los siguientes eventos que son agradables y sencillos.
onStart - se ejecuta cuando comienza el arrastre (una vez que se activa el snap)
onSort - se ejecuta cuando los artículos cambian de orden
onComplete - se ejecuta cuando sueltas un elemento en su lugar
Métodos clasificables
Los siguientes métodos clasificables son esencialmente funciones que pertenecen a clases:
despegar()
Con detach (), puede "separar" todos los identificadores actuales, haciendo que el objeto de la lista completa no se pueda ordenar. Esto es útil para deshabilitar la ordenación.
adjuntar()
Este método "adjuntará" los identificadores a los elementos de clasificación, funciona para habilitar la clasificación después de separar ().
addItems ()
Esto le permite agregar nuevos elementos a su lista ordenable. Supongamos que tiene una lista ordenable donde el usuario puede agregar un nuevo elemento, una vez que agregue ese nuevo elemento, deberá habilitar la clasificación en ese nuevo elemento.
eliminar elementos()
Este método le permite eliminar la capacidad de clasificación de un elemento dentro de una lista ordenable. Esto es útil cuando desea bloquear un elemento en particular dentro de una lista específica y no dejar que se ordene con otros.
addLists ()
En lugar de simplemente agregar un nuevo elemento a una lista existente, es posible que desee agregar una lista completamente nueva al objeto ordenable. Este método le permite agregar varias listas, lo que facilita la adición de más ordenables.
removeLists ()
Eliminemos las listas del objeto ordenable. Esto es útil cuando desea bloquear una lista en particular. Puede eliminar la lista, dejando las otras listas aún en el objeto ordenable, pero bloqueando el contenido de la lista eliminada.
publicar por fascículos()
Toda esa clasificación es genial, pero ¿qué pasa si quieres hacer algo con los datos? .publicar por fascículos(); devolverá una lista de los ID de los elementos, así como su orden en la lista. Puede elegir de qué lista obtener datos dentro del objeto por número de índice.
Ejemplo
El siguiente ejemplo crea una matriz de elementos div con numeración. Luego, reorganícelos haciendo clic, arrastrando y soltando acciones usando el puntero del mouse. Eche un vistazo al siguiente código.
<!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>Recibirá el siguiente resultado: