Draggable List

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

Example:

<DraggableList
    data={[
        { id: 0, text: "Compact" },
        { id: 1, text: "Large" },
        { id: 2, text: "Midsize" },
        { id: 3, text: "Small" }
    ]}
    onChange={ ( data ) => {
        let str = data
            .map( x => '"'+x.text+'"' )
            .join( ', ');
        alert( str );
    }}
/>

Open interactive preview

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.

results matching ""

    No results matching ""