The pickList is similar to an HTML multi-select list, in that it allows the user to select multiple items from a list of possible options. In addition, it supports optionally arranging the order of the selected items.
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.
<div id="list">
<ol class="source">
<li data-key="1" class="num">Item 1</li>
<li data-key="2" class="num">Item 2</li>
<li data-key="3" class="num">Item 3</li>
<li data-key="4" class="num">Item 4</li>
<li data-key="5" class="num">Item 5</li>
<li data-key="6" class="num">Item 6</li>
<li data-key="7" class="num">Item 7</li>
<li data-key="8" class="num">Item 8</li>
</ol>
<ol class="target">
<li data-key="9" class="num">Item 9</li>
</ol>
</div>
$('#list').pickList({
header: 'List layout'
});
Should your use case require the ordered display if item metadata, use the orderingList in a table layout.
Item 1 | 1 | |
Item 2 | 2 | |
Item 3 | 3 | |
Item 4 | 4 | |
Item 5 | 5 | |
Item 6 | 6 | |
Item 7 | 7 | |
Item 8 | 8 |
Item 9 | 8 |
<div id="table">
<table class="source">
<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>
</table>
<table class="target">
<tr data-key="9">
<td><i class="fa fa-trash-o"></i></td>
<td>Item 9</td>
<td>8</td>
</tr>
</table>
</div>
$('#table').pickList({
header: 'Table layout'
});