OrderingList Demos

The orderingList is a widget use to manually sort elements in a list, supporting both a list layout and a table layout. It is based on the jQuery UI sortable and selectable plugins.

OrderingList in List mode:

A simple orderingList widget with items laid out in list format. To use the widget, simply invoke the plugin passing in a reference to the <ol> element that identifies your list element. The widget will create any additional DOM nodes required to enable user interactions.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
  8. Item 8

Source:

<ol id="list">
  <li data-key="1">Item 1</li>
  <li data-key="2">Item 2</li>
  <li data-key="3">Item 3</li>
  <li data-key="4">Item 4</li>
  <li data-key="5">Item 5</li>
  <li data-key="6">Item 6</li>
  <li data-key="7">Item 7</li>
  <li data-key="8">Item 8</li>
</ol>
$('#list').orderingList({
  header: 'List layout' //caption
});

OrderingList in List mode w/ drag select:

The orderingList supports a dragSelect mode of operation, where the drag and drop clickable area is limited to the drag handles, allowing the rest of the item real estate to trigger selection by click and drag of the mouse.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
  8. Item 8

Source:

<ol id="list_dragselect">
  <li data-key="1">Item 1</li>
  <li data-key="2">Item 2</li>
  <li data-key="3">Item 3</li>
  <li data-key="4">Item 4</li>
  <li data-key="5">Item 5</li>
  <li data-key="6">Item 6</li>
  <li data-key="7">Item 7</li>
  <li data-key="8">Item 8</li>
</ol>
$('#list_dragselect').orderingList({
  header: 'List layout w/ drag-select', //caption
  dragSelect: true
});

OrderingList in Table mode:

Should your use case require the ordered display if item metadata, use the orderingList in a table layout.

Icon Label #
Item 1 1
Item 2 2
Item 3 3
Item 4 4
Item 5 5
Item 6 6
Item 7 7
Item 8 8

Source:

<table id="table">
  <thead>
  <tr>
    <th>Icon</th>
    <th>Label</th>
    <th>#</th>
  </tr>
  </thead>
  <tbody>
  <tr data-key="1">
    <td><i class="fa fa-flask"></i></td>
    <td>Item 1</td>
    <td>1</td>
  </tr>
  <tr data-key="2">
    <td><i class="fa fa-bell"></i></td>
    <td>Item 2</td>
    <td>2</td>
  </tr>
  <tr data-key="3">
    <td><i class="fa fa-bolt"></i></td>
    <td>Item 3</td>
    <td>3</td>
  </tr>
  <tr data-key="4">
    <td><i class="fa fa-plane"></i></td>
    <td>Item 4</td>
    <td>4</td>
  </tr>
  <tr data-key="5">
    <td><i class="fa fa-pencil"></i></td>
    <td>Item 5</td>
    <td>5</td>
  </tr>
  <tr data-key="6">
    <td><i class="fa fa-star"></i></td>
    <td>Item 6</td>
    <td>6</td>
  </tr>
  <tr data-key="7">
    <td><i class="fa fa-trophy"></i></td>
    <td>Item 7</td>
    <td>7</td>
  </tr>
  <tr data-key="8">
    <td><i class="fa fa-legal"></i></td>
    <td>Item 8</td>
    <td>8</td>
  </tr>
  </tbody>
</table>
$('#table').orderingList({
  header: 'Table layout'
});

OrderingList in Table mode w/ drag select:

The table layout similarly supports the dragSelect mode of operation.

Icon Label #
Item 1 1
Item 2 2
Item 3 3
Item 4 4
Item 5 5
Item 6 6
Item 7 7
Item 8 8

Source:

<table id="table_dragselect">
  <thead>
  <tr>
    <th>Icon</th>
    <th>Label</th>
    <th>#</th>
  </tr>
  </thead>
  <tbody>
  <tr data-key="1">
    <td><i class="fa fa-flask"></i></td>
    <td>Item 1</td>
    <td>1</td>
  </tr>
  <tr data-key="2">
    <td><i class="fa fa-bell"></i></td>
    <td>Item 2</td>
    <td>2</td>
  </tr>
  <tr data-key="3">
    <td><i class="fa fa-bolt"></i></td>
    <td>Item 3</td>
    <td>3</td>
  </tr>
  <tr data-key="4">
    <td><i class="fa fa-plane"></i></td>
    <td>Item 4</td>
    <td>4</td>
  </tr>
  <tr data-key="5">
    <td><i class="fa fa-pencil"></i></td>
    <td>Item 5</td>
    <td>5</td>
  </tr>
  <tr data-key="6">
    <td><i class="fa fa-star"></i></td>
    <td>Item 6</td>
    <td>6</td>
  </tr>
  <tr data-key="7">
    <td><i class="fa fa-trophy"></i></td>
    <td>Item 7</td>
    <td>7</td>
  </tr>
  <tr data-key="8">
    <td><i class="fa fa-legal"></i></td>
    <td>Item 8</td>
    <td>8</td>
  </tr>
  </tbody>
</table>
$('#table_dragselect').orderingList({
  header: 'Table layout w/ drag-select',
  dragSelect: true
});