jQuery sortable list plugin

Some time ago I needed simple sortable listbox (html select element). The first thing I do in such cases is check existing jQuery plugins. However surprisingly I didn’t find suitable implementation. So I wrote it by myself and then wrap it as jQuery plugin (it is published on github also: https://github.com/sadomovalex/jquery.sortablelist. Please use it as primary source, because code may be changed in future):

   1: (function ($) {

   2:  

   3:     $.fn.sortablelist = function (options) {

   4:         var self = $(this);

   5:         var opts = $.extend({}, $.fn.sortablelist.defaults, options);

   6:  

   7:         var width = self.width() || opts.width;

   8:         width += opts.arrowsColumnWidth + 10;

   9:  

  10:         var height = self.height() || opts.height;

  11:         

  12:         self.wrap('<div id="sortablelist"/>');

  13:         var parent = self.parent('#sortablelist');

  14:         parent.width(width).height(height);

  15:  

  16:         self.attr('style', 'float: left');

  17:         self.after(

  18:             '<div id="arrows" style="float: left">' +

  19:             ' <a href="#" style="text-decoration: none" id="up">' + opts.up + '</a><br />' +

  20:             ' <a href="#" style="text-decoration: none" id="down">' + opts.down + '</a>' +

  21:             '</div>');

  22:         parent.find('#up').click($.fn.sortablelist.moveUp);

  23:         parent.find('#down').click($.fn.sortablelist.moveDown);

  24:  

  25:         parent.find('#arrows').width(opts.arrowsColumnWidth).height(height);

  26:     };

  27:  

  28:     $.fn.sortablelist.moveUp = function () {

  29:         var sel = $(this).parents('#sortablelist').find('select :selected');

  30:         if (sel.length != 1) {

  31:             return;

  32:         }

  33:         sel.each(function(){

  34:             $(this).insertBefore($(this).prev());

  35:         });

  36:     };

  37:  

  38:     $.fn.sortablelist.moveDown = function () {

  39:         var sel = $(this).parents('#sortablelist').find('select :selected');

  40:         if (sel.length != 1) {

  41:             return;

  42:         }

  43:         sel.each(function(){

  44:             $(this).insertAfter($(this).next());

  45:         });

  46:     };

  47:  

  48:     $.fn.sortablelist.defaults = {

  49:         arrowsColumnWidth: 20,

  50:         up : '⇑',

  51:         down : '⇓',

  52:         width: 200,

  53:         height : 100,

  54:     };

  55:  

  56: })(jQuery);

I decided to share it – may be it will be useful for someone else. Currently it is released with version 0.1 and contains mostly features which I needed in my project, however it also contains few options which can be used for customization:

Name	Description
arrowsColumnWidth	Width of the div which will be added next to the html select element. Default value is 20.
up	Text (or html content) for up arrow. Default value is "⇑" (⇑).
down	Text (or html content) for down arrow. Default value is "⇓" (⇓).
width	If width of html select element can't be determined, this parameter will be used for width of wrapping div. Default value is 200.
height	If height of html select element can't be determined, this parameter will be used for height of wrapping div. Default value is 100.

Living demo can be checked here: http://camlex-online.org/demo/jquery-sortable-list-plugin-demo.html. If you will find bugs or will need new features, you may leave comments here or on github.