jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser

fieldChooser is a jQuery & jQuery UI component for creating a drag'n'drop multi-selection list box with ease. The plugin allows you to move the currently selected items to another container by using the drag and drop method.

See also:

• Fully Customizable jQuery Select Element Plugin - Multiselect
• jQuery Multi-Select List Box Plugin - listbox.js

Basic Usage:

1. Include the latest version of jQuery library and jQuery UI from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery fieldChooser plugin after jQuery javascript library.

<script src="fieldChooser.js"></script>

3. Markup html structure.

<div id="sourceFields">
<div> Item 1 </div>
<div> Item 2 </div>
<div> Item 3 </div>
<div> Item 4 </div>
<div> Item 5 </div>
...
</div>
<div id="fieldChooser" tabIndex="1"></div>

4. The javascript.

<script>
$(document).ready(function () {
var $chooser = $("#fieldChooser").fieldChooser();
var $sourceFields = $("#sourceFields").children();
$chooser.getSourceList().add($sourceFields);
});
</script>

5. The sample CSS to style the multi-selection list box.

div#sourceFields {
display: none;
}
div#fieldChooser {
width: 350px;
}
.fc-field {
margin: 0 0 0 0;
padding: 5px;
font-size: 1.2em;
width: 120px;
outline: #777777 ridge thin;
background-color: #cccccc;
}
.fc-selected {
background-color: #999999;
}
.fc-field-list {
margin: 0;
padding: 3px 3px 3px 3px;
margin-right: 10px;
outline: #333333 solid thin;
height: 600px;
width: 150px;
overflow: scroll;
}
.fc-source-fields {
float: left;
}
.fc-destination-fields {
float: right;
}

Change log:

v1.0.5 (2014-05-29)

• Bug fixes

v1.0.5 (2014-05-29)

• Bug fixes, refactoring

v1.0.4 (2013-12-27)

• Fixed issue with arrow keys

---

This awesome jQuery plugin is developed by mateagar. For more Advanced Usages, please check the demo page or visit the official website.