MooTools - Sortables
Sortables est une fonctionnalité avancée du développement Web et peut vraiment ouvrir les options avec vos conceptions d'interface utilisateur. Il comprend également une excellente fonction appelée "sérialiser" qui gère une liste d'identifiants d'élément et est utile pour les scripts côté serveur.
Création d'un nouvel objet triable
Tout d'abord, nous envoyons la liste des éléments à une variable. Si vous voulez un tableau de la liste des éléments, affectez toute la collection à une variable. Et, enfin, passez cette variable à un constructeur triable. Jetez un œil à la syntaxe suivante pour créer un objet triable.
Syntaxe
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);Voici le code HTML de la syntaxe.
Syntaxe
<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>Option triables
Sortable fournit différentes options pour personnaliser l'objet triable. Laissez-nous discuter des options.
Contraindre
Cette option détermine si les éléments de la liste peuvent sauter entre les uls dans l'objet triable. Par exemple, si vous avez deux uls dans l'objet triable, vous pouvez "constrain"les éléments de la liste à leur ul parent en définissant"constrain: true". Jetez un œil à la syntaxe suivante pour définir la contrainte.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Cloner
Cette option vous aide à créer un élément clone sous votre curseur. Cela aide à trier les éléments de la liste. Jetez un œil à la syntaxe suivante pour clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Manipuler
Handle est une option qui accepte un élément comme poignée de glissement. Ceci est utile chaque fois que vous voulez que vos éléments de liste puissent être sélectionnés ou que vous voulez des actions dans votre liste. Si vous ne fournissez aucune variable, elle sera considérée comme fausse par défaut. Jetez un œil à la syntaxe suivante pour utiliser handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacité
Cette option vous permet d'ajuster l'élément de tri. Si vous utilisez un clone, l'opacité affecte l'élément qui trie.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Revenir
Cette option accepte "false" ou toute option Fx. Si vous définissez l'option Fx dans Revert, cela créera un effet permettant à l'élément trié de se mettre en place. Jetez un œil à la syntaxe suivante pour revenir.
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
}
});Casser
Cette option vous permet de voir combien de px l'utilisateur fera glisser la souris avant que l'élément ne commence à suivre.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Événements triables
Sortable fournit les événements suivants qui sont simples et simples.
onStart - s'exécute lorsque le glissement commence (une fois que le snap se déclenche)
onSort - s'exécute lorsque les articles changent d'ordre
onComplete - s'exécute lorsque vous déposez un élément en place
Méthodes triables
Les méthodes triables suivantes sont essentiellement des fonctions appartenant à des classes -
détacher()
Avec detach (), vous pouvez «détacher» toutes les poignées actuelles, rendant la liste entière non triable. Ceci est utile pour désactiver le tri.
attacher()
Cette méthode "attachera" les poignées aux éléments de tri, fonctionne pour activer le tri après detach ().
Ajouter des articles()
Cela vous permet d'ajouter de nouveaux éléments à votre liste triable. Disons que vous avez une liste triable dans laquelle l'utilisateur peut ajouter un nouvel élément, une fois que vous avez ajouté ce nouvel élément, vous devrez activer le tri sur ce nouvel élément.
supprimer des éléments()
Cette méthode vous permet de supprimer la capacité de tri d'un élément dans une liste triable. Ceci est utile lorsque vous souhaitez verrouiller un élément particulier dans une liste spécifique et ne pas le laisser trier avec d'autres.
addLists ()
Au lieu d'ajouter simplement un nouvel élément à une liste existante, vous souhaiterez peut-être ajouter une toute nouvelle liste à l'objet triable. Cette méthode vous permet d'ajouter plusieurs listes, ce qui facilite l'ajout de plus de triables.
removeLists ()
Supprimons les listes de l'objet triable. Ceci est utile lorsque vous souhaitez verrouiller une liste particulière en place. Vous pouvez supprimer la liste, en laissant les autres listes toujours dans l'objet triables, mais en verrouillant le contenu de la liste supprimée.
sérialiser ()
Tout ce tri est excellent, mais que faire si vous voulez faire quelque chose avec les données? .serialize (); renverra une liste des identifiants des articles ainsi que leur ordre dans la liste. Vous pouvez choisir la liste à partir de laquelle obtenir des données dans l'objet par numéro d'index.
Exemple
L'exemple suivant crée un tableau d'éléments div avec une numérotation. Plus tard, réorganisez-les en cliquant, en faisant glisser et en déposant des actions à l'aide du pointeur de la souris. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -