Dynamic Dual List Picker In Pure JavaScript – list-picker

Preview:

Description:

A dual list box style picker component which allows you to move any number of items between two html lists using mouse click or touch tap.

How to use it:

Insert the list-picker’s JavaScript and Stylesheet into the html page.

<link rel="stylesheet" href="src/list-picker.css">
<script src="src/list-picker.js"></script>

The primary HTML structure for the list picker.

<div class="list-picker">
  <ul id="options" class="list-picker-list">
    <li class="list-picker-list-item">Item</li>
  </ul>
  <ul id="picks" class="list-picker-list"></ul>
</div>

Prepare your list items in a JavaScript array as this:

var list = ['ActionScript', 'CSS', 'C#', 'HTML', 'Java', 'JavaScript', 'Python', 'Ruby', 'Swift'];

Initialize the list picker with default settings.

var listPicker = new ListPicker({
    list: list
});

All configuration options.

var listPicker = new ListPicker({
    list: list,   // Array list
    gap: 1,       // Gap between items
    order: 'asc', // Ordering in second list
    reset: true   // Reseting when picked 
});

Get the picked items.

listPickerInstance.getPicks()