Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Organiser des listes avec JQUERY et SORTABLE

Par Louison BEAUFRE Publié le 09/05/2016 à 23:04:04 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Présentation

jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client et ainsi dynamiser des pages web

Sortable est un widget jquery permettant d'organiser, de trier mais aussi de dropper des éléments dans une liste, ou entre plusieurs listes

Sommaire

-Trier et organiser une liste

-Connecter plusieurs listes

-Aller plus loin avec sortable

-Conclusion

Trier et organiser une liste

Nous allons utiliser jquery-ui.js, il sera donc necessaire d'inclure le fichier avant toute chose.

Dans votre code HTML, il vous faudra une liste UL avec un id "sortable". Dans cette liste il vous faudra au moins 4 balises li pour que votre code fonctionne et que l'exemple soit le plus parlant possible.

Voici ma liste d'exemple :

La class ui-state-default nous servira plus par la suite. Pour le moment retenez que cela permet d'avoir un style particulier pour chaque item de votre liste.

Au niveau du code jquery il va falloir appliquer la fonction sortable à notre liste :

disableSelection permettra de désactiver la sélection du contenu du texte au sein de l'ensemble des éléments. Votre liste peu maintenant être triée.

Connecter plusieurs listes

Reprenons notre liste de la première partie. Renommez l'id en "sortable1" et appliquez au UL une classe nommée ConnectedSortable. Créez une seconde liste semblable avec comme id "sortable2". Vous devriez avoir un code HTML semblable à celui-ci :

Ici nous pouvons reparler des classes appliquées aux balises li. Ainsi ui-state-default sera considérée comme la classe par défaut soit un style gris représentant un élément "plein". Ui-state-highlight pourra servir de style des éléments vide. Je l'utilise personnellement comme élément visuel dans une liste cible pour indiquer que cette liste peut être triée.

Coté jQuery il va maintenant falloir connecter nos listes pour qu'elles puissent intéragire.

Cette fonction est semblable à la précédente, la différence se fait au niveau de l'option connectWith. Ceci permettra grâce à un nom de classe, par exemple, de connecter deux ou plusieurs listes ensemble si leur balise ul possède cette classe commune. Il m'est difficile d'illuster les résultats, mais de simples copiés collés vous permettront de comprendre le fonctionnement très simplement.

Aller plus loin avec sortable

Maintenant que vous savez connecter plusieurs listes je vais vous montrer comment maîtriser chaque mouvement par le biais de divers méthodes et options. Premier exemple, je voudrai que les items possédant la classe ui-state-highlight ne puissent plus être déplacés :

L'option item couplée avec "not" va permettre de "désactiver" le sortable pour ces éléments.

Il existe plusieurs méthodes permettant le gestion du sortable, voici les plus utiles : Sortstart exécutée au moment du clique sur l'item à déplacé. Sortreceive exécutée au moment un la liste cible reçoit l'item. SortStop éxécuté une fois sortreceive terminée. Pour les implémenter rien de plus simple :

Ou alors seconde solution :

Les paramètres event et ui vont nous donner des indications sur les listes source et cible et sur l'élément en mouvement. Exemple pour la fonction receive :

Ici this.id sera l'id de la liste cible , ui.item l'élément déplacé et ui.sender sera la liste source.

Je voudrai maintenant empécher annuler une action sortable à la réception de mon item dans ma liste cible.

Le paramètre cancel passé à la fonction sortable va annulé le mouvement en cour et l'item retournera dans la liste et à sa position d'origine.

Conclusion

Sortable et un widget relativement simple à prendre en main et qui avec un peu de pratique pourra s'avérer très puissant avec la possibilité d'organiser des listes dynamiquement, d'interdire le déplacement de certains éléments, ou encore de créer dynamiquement des listes d'éléments que l'on pourra intégrer à notre groupe sortable. Si vous désirez mettre en place un drag and drop ou dynamiser votre page web c'est un outil indispensable.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels