🔀 TLD - tld_sortable - Composant de Liste Triable

📖 Introduction

tld_sortable est un Web Component de liste triable basé sur la librairie éprouvée Sortable.js. Il permet de réorganiser dynamiquement des éléments par glisser-déposer (drag & drop), directement dans le navigateur, sans dépendre d’un framework front-end.

Le composant prend en charge :

• le drag & drop fluide, y compris entre plusieurs listes,
• une personnalisation avancée des options Sortable.js,
• des animations configurables pour améliorer l’expérience utilisateur,
• une intégration simple via un composant HTML personnalisé.

📦 Installation / Prérequis / Dépendances

tld_sortable repose sur les dépendances suivantes :

Dépendances internes

• tld_custom_elements Classe de base commune aux Web Components TLD, responsable :

Dépendance externe

• SortableJS Librairie JavaScript de référence pour le drag & drop

📄 Proprietes

Sortable

declare public Sortable : Sortable

Instance de la classe Sortable créée par Sortable.create(). Elle permet d’interagir directement avec l’API Sortable.js si nécessaire.

Option

public _option = {
    group: {
        name : "group-1"
    },
    animation: 100,
    fallbackOnBody : true,
    invertSwap : true,
    swapThreshold : 0.65,
    delay: 100,
    chosenClass: 'tld-sortable-chosen',
}

Objet de configuration transmis à Sortable.js. Il définit notamment :

• le groupe (pour autoriser le drag & drop inter-listes),
• la durée de l’animation,
• le comportement de permutation,
• la classe CSS appliquée à l’élément sélectionné.

⚙️ Methodes

[NAME_METHODE]

render() {}

La méthode render() est appelée lors du cycle de vie du composant. Elle initialise Sortable.js sur l’élément courant.

render() {
        this.dispatchEvent(new CustomEvent("build"))
        this.Sortable = Sortable.create(this , this._option)
    }

🏷️ Attributs HTML

Attributes	Description
option	Options de configuration Sortable.js (format objet)

🚀 Utilisation

Exemple simple d’utilisation :

<tld-sortable id="list1">
    <div>Élément 1</div>
    <div>Élément 2</div>
    <div>Élément 3</div>
</tld-sortable>

Plusieurs composants tld-sortable peuvent partager le même group.name afin de permettre le déplacement d’éléments entre listes.

Stylisation (CSS)

Le composant ne repose pas sur le Shadow DOM, ce qui permet une personnalisation CSS complète depuis l’extérieur.

🎯 Conclusion

tld_sortable est un Web Component puissant et flexible pour gérer le réordonnancement d’éléments via drag & drop. En s’appuyant sur Sortable.js, il combine robustesse, performances et simplicité d’intégration.

Il est particulièrement adapté aux :

• interfaces administratives,
• tableaux dynamiques,
• dashboards,
• éditeurs visuels.

Intégré à l’écosystème TLD, il constitue une brique essentielle pour construire des interfaces interactives modulaires et maintenables.

📜 Code

import Sortable from "sortablejs";
import { tld_custom_elements } from "../tld_custom_elements";
import "./index.css"

export class tld_sortable extends tld_custom_elements {
    
    declare public Sortable : Sortable
    public _option = {
        group: {
            name : "group-1"
        },
        animation: 100,
        fallbackOnBody : true,
        invertSwap : true,
        swapThreshold : 0.65,
        delay: 100,
        chosenClass: 'tld-sortable-chosen',
    }

    constructor(Attributes : {[name:string] : any} | null = null) {
        super(Attributes)
    }


    render() {
        this.dispatchEvent(new CustomEvent("build"))
        this.Sortable = Sortable.create(this , this._option)
    }
    
    static get observedAttributes() { return ["option"] ;}
}

tld-sortable {
    display: block;
    padding: 5px;
    border: 1px solid rgb(161, 161, 161);
    margin: 5px;
}

tld-sortable > div {
    padding: 5px;
    margin: 5px;
    border: 1px solid rgb(161, 161, 161);
}

tld-sortable  .tld-sortable-chosen {
    cursor: move;
    border-color: red;
}