Draggable List

Eine Liste mit verschiebbaren Elementen, die von den Schülern neu geordnet werden können.

Optionen

• data | array (required): Array von Objekten mit den Schlüsseln id und text. Default: none.
• onChange | function: Callback, der bei jeder Änderung mit neu geordnetem Datenarray aufgerufen wird. Default: onChange(){}.
• onInit | function: Callback-Funktion, die nach der Montage der Komponente aufgerufen wird. Default: onInit(){}.
• shuffle | boolean: steuert, ob die Datenelemente bei der ersten Anzeige gemischt werden sollen. Default: false.
• disabled | boolean: steuert, ob Elemente gezogen werden können oder nicht. Default: false.
• className | string: Klassenname. Default: ''.
• style | object: CSS-Inline-Stile. Default: {}.

Beispiele

Live-Editor

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

Ergebnis

ReferenceError: Provider is not defined