Draggable List

Een lijst met versleepbare elementen die door de leerlingen opnieuw kunnen worden geordend.

Opties

• data | array (required): array van objecten met id en tekst toetsen. Default: none.
• onChange | function: callback ingeroepen met nieuw bestelde data-array bij elke wijziging. Default: onChange(){}.
• onInit | function: terugbelfunctie ingeroepen na montage van de component. Default: onInit(){}.
• shuffle | boolean: controleert of de gegevenselementen in de initiële weergave moeten worden geschud. Default: false.
• disabled | boolean: regelt of elementen al dan niet kunnen worden versleept. Default: false.
• className | string: klassennaam. Default: ''.
• style | object: CSS inline-stijlen. Default: {}.

Voorbeelden

Live redacteur

<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" }
    ]}
/>

Resultaat

ReferenceError: Provider is not defined