Draggable List

Une liste d'éléments pouvant être déplacés qui peuvent être réorganisés par les élèves.

Options

data | array (required): tableau d'objets avec des clés "id" et "text. Default: none.
onChange | function: rappel invoqué avec un tableau de données nouvellement ordonné à chaque changement. Default: onChange(){}.
onInit | function: fonction de rappel invoquée après le montage du composant. Default: onInit(){}.
shuffle | boolean: contrôle si les éléments de données doivent être mélangés lors de l'affichage initial. Default: false.
disabled | boolean: contrôle si les éléments peuvent être déplacés ou non. Default: false.
className | string: nom de la classe. Default: ''.
style | object: Styles CSS en ligne. Default: {}.

Exemples

Éditeur en direct

<DraggableList
    data={[
        { id: 0, text: "Compact" },
        { id: 1, text: "Large" },
        { id: 2, text: "Midsize" },
        { id: 3, text: "Small" }
    ]}
/>

<DraggableList
    data={[
        { id: 0, text: "Compact" },
        { id: 1, text: "Large" },
        { id: 2, text: "Midsize" },
        { id: 3, text: "Small" }
    ]}
/>

Résultat

ReferenceError: Provider is not defined

Options​

Exemples​

Options

Exemples