jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser
File Size: | 202 KB |
---|---|
Views Total: | 43701 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.