PickList Demos

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.

PickList 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
  1. Item 9

Source:

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

PickList in Table mode:

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

Source:

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