Draggable List

A list of draggable elements that can be re-ordered by the students.

Options

• data | array (required): array of objects with id and text keys. Default: none.
• onChange | function: callback invoked with newly ordered data array on each change. Default: onChange(){}.
• onInit | function: callback function invoked after mounting of component. Default: onInit(){}.
• shuffle | boolean: controls whether data elements should be shuffled in initial display. Default: false.
• disabled | boolean: controls whether elements can be dragged or not. Default: false.
• className | string: class name. Default: ''.
• style | object: CSS inline styles. Default: {}.

Examples

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

Result

ReferenceError: Provider is not defined