In the Financial Centre UK sign up process, we asked users to add categories for their company. We had a simply text box which they entered a comma separated list of categories. But we wanted to jazz it up and add new functionality to suggest categories to them.

Here is a screen grap of the finished product -


We looked around the web for a good jquery widget to allow us to populate the lists before hand or using ajax and transfer to another list but nothing seemed to fit our porpuse. So we create a new jquery widget to implement the functionality.

The widget needed to support drag and drop, add all and an easy way for us to populate the suggested list. We first started using the html select tag but jquery ui doesn't seem to support drag and drop  functionaltiy we wanted. Then we looked at just using the html ul tag but we couldn't find a clean way of posting back the selected categories from the user. So we took a hybrid approach and used both the html select and ul tags.

In the htmk markup we have two html select tags, one for the suggest categories, the other for the selected categories. The suggest categories is populated when the page first loads for the user. The selected category is populated when the user selects/add a new category.

The widget is initialised using the options below when the document is ready.

 $('.ListBox1').listtransfer({
        to: '.ListBox2', //selector of second multiple select box
        dblClick: true, //true or false, activates double click transfer
        addId: '#addT', //add buttong id
        removeId: '#removeT', // remove button id
        addAllId: '#addAllT', // add all button id
        removeAllId: '#removeAllT', // remove all button id
        tClass: 'added', //class to be added when tranfered to another select.
        container: '#TagGenerator'
    });


The widget hides the html select tags and inserts html ul tags instead.
    this.element.hide();
      $(o.to).hide();
      this.suggestedList = $('<ul class="select1"></ul>').insertAfter(this.element);
      this.selectedList = $('<ul class="select2"></ul>').insertAfter($(o.to));

We then populate the html ul tags with the information in html select tags.
    //populate the lists.
      this._populateInit(this.element, this.suggestedList);
      this._populateInit(o.to, this.selectedList);

Setup each of the list items to be draggable (see http://jqueryui.com/demos/draggable/) and clickable for both ul lists.
    $('li', this.suggestedList).click(function(event) {
            $(this).toggleClass('selected', '');
      }).addClass('ui-widget-content').draggable({ containment: $(o.container), revert: 'invalid', cursor: 'move' });

Both ul lists have the following applied to them to make them dropable (see http://jqueryui.com/demos/droppable).
                $(this.selectedList).droppable({
                    accept: '.select1>li',
                    activeClass: 'ui-state-hover',
                    hoverClass: 'ui-state-active',
                    drop: function(event, ui) {
                        // $(this).addClass('ui-state-highlight')
                        $(ui.draggable).css('left', '0px');
                        $(ui.draggable).css('top', '0px');
                        $(ui.draggable).addClass(o.tClass).removeClass('selected').appendTo(that.selectedList);
                        that._addToListBox($(ui.draggable).text());
                        if (o.dblClick === true) {
                            $('li', that.selectedList).dblclick(function() {
                                that._cRemove();
                            })
                        };
                        event.preventDefault();
                    }
                });

Notice the _addToListBox in the code. This is an internal function to the widget so that items can be added to the html select tag for selected categories. The corresponding function _removeFromListBox removes the items from the selected categories when the user removes an item from the html ul tag for selected categories.

The _addToListBox function is simply a one line in jquery -'$('<option value="' + item + '" selected>' + item + '</option>').appendTo(this.options.to);'
While the _removeFromListBox  is '$(this.options.to).find('option').filter(function(index) {
                return ($(this).text() == item);
            }).remove();'

We used the articles at http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/, http://mattberseth.com/blog/2008/07/jqueryui_progressbar_widget.html and http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html to help in understanding how to create a widget for JQuery UI.