The fieldChooser is UI control of jQuery drag and drop elements, that provides multi-select of elements by moving them between a source and a destination lists.
jQuery drag and drop elements from source to destination with fieldChooser plugin
This plugin allows user to move the currently selected items to another container, by using the drag and drop method. Easy selecting items from a list of fields or values (the source) and adding them to a new list (the destination). Fields themselves can be simple HTML elements or even more complex containers.
FieldChooser brings the jQuery UI Sortable interaction, which allows for dragging and dropping of an HTML element between two containers. It also creates and manages the interaction between the containers, and adds the following capabilities:
– keyboard support (navigate through a list using the up and down arrow keys; hold down the shift key while pressing up or down to select multiple items)
To use this plugin, we need to include jQuery for DOM manipulation, and jQuery UI for drag and drop support.
Then simply create a div element to hold the field chooser. Within this div, let’s add an additional div element, which will contain the source “fields”, and another div containing the destination fields.
The let’s call the plugin for those elements.
var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser($sourceFields,