JQuery UI List to List Widget
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
site
src
test
.bowerrc
.gitignore
Gruntfile.js
LICENSE-GPL
README.md
bower.json
jqueryui-l2l.jquery.json
l2l.min.css
l2l.min.js
package.json

README.md

jQuery UI List to List Widget

A jQuery UI plugin to used move items between two lists.

Features

  • Moves list items from left to right, right to left, into the list (change items order)
  • Moving can be done using the controls or by drag and drop
  • Multiple selection, by holding Ctrl or by using the lasso
  • L2L interconnect : drop an item to another widget's list
  • Theme fully integrated to jQuery UI
  • Customizable
  • Auto sort of the items

Getting started

Requirements

  • jquery >= 1.8 (only tested with 2.0.0)
  • jquery-ui >= 1.10

Install

Download the latest tag or get it via bower :

bower install --save jquery-l2l

Then add the stylesheet and the script files to your HTML file (in addition to the dependencies)

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />  
<link rel="stylesheet" type="text/css" href="components/jqueryui-l2l/l2l.min.css" />
        
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="components/jqueryui-l2l/l2l.min.css"></script>

Note that a jQuery UI theme must be loaded, as the plugin integrates with a theme (it can be a custom theme).

The plugin must target a block element that contains exactly two ul elements :

<div class="my-lists">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul></ul>
</div>
$('.my-lists').l2l();

Documentation

Options

$.fn.l2l(options)

  • icons Object : the list of icons used (refers to jquery-ui icon classes)
    • l2r String : icon class of the left to right action (default = 'ui-icon-triangle-1-e')
    • r2l String : icon class of the right to left action (default = 'ui-icon-triangle-1-w')
    • clear String : icon class of the clear action (default = 'ui-icon-trash')
    • grip String : icon class of the item's grip (default = 'ui-icon-grip-dotted-vertical')
  • width String | Number : the lists width as auto, a css string or in pixel (default = 'auto')
  • height String | Number : the lists height as auto, a css string or in pixel (default = 'auto')
  • clear String | Boolean : the clear/trash button strategy in 'right', 'left', 'all' or false by example, left removes selected items from the left list, etc. (default = 'right')
  • interconnect Boolean : in case of multiple l2ls widgets, if we can drag elements into another widget (default=false)
  • sort Boolean : sort items regarding sortLag. Items are sorted at creation and after moving action, expected drag n'drop (default = false)
  • autosort Boolean : sort also when dropped (default = false)
  • sortAlg(current, next) → {Number} Function : the sort algorithm function, the curent and next items elements in parameters and returns a negative, zero or positive number.
Sample
$('selector').l2l({
   height : '25em',
   width : 200,
   sort : true,
   autosort: true
});

Events

  • create(event) Function : triggered after the widget has been created
  • change(event, items) Function : triggered after any change in the items of the both lists
Sample
$('selector').l2l({
  create: function(){
     console.log('widget created');  
   },
   change: function(event, items){
       console.log(items.left);
       console.log(items.right);
   }
});

Methods

  • getItems() → {Object} Function : returns the items of the both lists, each item is the

Todo

  • hard reset : save the items state before plugin load to be able to restore it
  • move all : move all items from r2l or l2r
  • implements the destroy and disable method
  • See issues

Development

Set up

As well, node and npm must be installed and running on your system.

  1. Clone/Fork the repo
  2. Install bower and grunt, if you don't have them already : $> npm install -g grunt-cli bower
  3. Go to the project folder : $> cd jqueryui-l2l
  4. Install the development dependencies : $> npm isntall
  5. Install the client librairies : $> bower isntall
  6. The jquery.ui dependency needs also to be build: $> cd lib/jquery.ui; npm install; grunt build

Technical documentation

The plugin uses the widget factory provided by jQUery UI. Please refer to the offical documentation to learn the way it works.

Tests

Any evolution must be tested using the [qunit] test. Add a new test case to test/l2l_test.js.

The test suite must runs succesfuly. Try it using: $> grunt qunit

Build

Run the build sequence : $> grunt

History

  • 0.1.1 First release
    • 0.1.2 Updated meta-data