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.
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.
<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
});
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.
<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
});
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 |
<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'
});
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 |
<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
});