jQuery drag and drop elements from source to destination

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:

– multi-select

– 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)

Demo: jQuery drag and drop elements from source to destination
Demo: jQuery drag and drop elements from source to destination

Usage

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.

For example:

var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser($sourceFields,
  $destinationFields);

That’s it!

Demo:

http://javascript-html5-tutorial.net/demos/demo-fieldchooser

License: MIT

Get jQuery drag and drop elements plugin from GitHub:

https://github.com/mateagar/fieldChooser

At GitHub page you can find more detailed information about methods and events provided by this solution.

See also:

jQuery plugin for custom select menus

Ideal Forms 3: build and validate responsive HTML5 forms!

A great jQuery web UI library – w2ui

DrumJS – A jQuery animated date picker and value selector (iOS style)

Google plus like jQuery drop down box

jQuery multiselect – two column transfer widget

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1