diff --git a/css/multi-select.css b/css/multi-select.css index 8b3bb5e..ba265cb 100644 --- a/css/multi-select.css +++ b/css/multi-select.css @@ -78,7 +78,8 @@ } .ms-container .ms-selectable li.ms-hover, -.ms-container .ms-selection li.ms-hover{ +.ms-container .ms-selection li.ms-hover, +.ms-container .ms-selection li.ui-sortable-helper{ cursor: pointer; color: #fff; text-decoration: none; @@ -90,4 +91,8 @@ background-color: #eee; color: #aaa; cursor: text; -} \ No newline at end of file +} + +.ms-container .ms-list.ui-sortable > li { + cursor: move; +} diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js index d71ca10..00a9e49 100644 --- a/js/jquery.multi-select.js +++ b/js/jquery.multi-select.js @@ -85,6 +85,23 @@ ms.on('focus', function(){ that.$selectableUl.focus(); }); + if (that.options.sortable){ + // we depend on jQueryUi for ordering so check if it is available + if (jQuery.ui) { + // initialize jQueryUi sortable + that.$selectionUl.sortable({ + stop: function(event,ui){ + that.sort(); + }, + axis: "y", + helper: "clone" + }); + that.$selectionUl.disableSelection(); + } else { + that.options.sortable = false; + console.warn('Please include jQueryUI if you want to use the sortable option. Sorting has been disabled.') + } + } } var selectedValues = ms.find('option:selected').map(function(){ return $(this).val(); }).get(); @@ -406,6 +423,7 @@ that.options.afterSelect.call(this, value); } } + this.sort(); } }, @@ -485,6 +503,17 @@ } }, + 'sort': function(){ + var ms = this.$element, + that = this; + if (that.options.sortable){ + // iterate over the selected elements in order and append the corresponding option element to the select. + that.$selectionUl.find('.ms-selected').each(function() { + ms.append(ms.find('[value="'+$(this).data('ms-value')+'"]')); + }); + } + }, + sanitize: function(value){ var hash = 0, i, character; if (value.length == 0) return hash; @@ -526,7 +555,8 @@ disabledClass : 'disabled', dblClick : false, keepOrder: false, - cssClass: '' + cssClass: '', + sortable: false }; $.fn.multiSelect.Constructor = MultiSelect;