New Option: Sortable

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;
-}
+}
+
+.ms-container .ms-list.ui-sortable > li {
+  cursor: move;
+}

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;