From a90912c38c42981944ddbdcc1137f3fad9f5bbba Mon Sep 17 00:00:00 2001
From: Tim Schneider <tim.schneider@nb-dev.de>
Date: Tue, 15 Mar 2016 11:47:40 +0100
Subject: [PATCH 1/3] Adding a 'sortable' option that allows the sorting of the
 selected side. jQueryUI is required for this. If it is not loaded, the
 sortable option will be deactivated automatically.

---
 css/multi-select.css      |  3 ++-
 js/jquery.multi-select.js | 37 +++++++++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/css/multi-select.css b/css/multi-select.css
index 8b3bb5e..4c1b9e5 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;
diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js
index 5c25713..b41c6d9 100644
--- a/js/jquery.multi-select.js
+++ b/js/jquery.multi-select.js
@@ -84,7 +84,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"
+            });
+            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();
@@ -329,7 +345,7 @@
       });
 
       this.$container.on('mouseleave', that.elemsSelector, function () {
-        $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover');;
+        $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover');
       });
     },
 
@@ -341,7 +357,7 @@
     'destroy' : function(){
       $("#ms-"+this.$element.attr("id")).remove();
       this.$element.off('focus');
-      this.$element.css('position', '').css('left', '')
+      this.$element.css('position', '').css('left', '');
       this.$element.removeData('multiselect');
     },
 
@@ -398,6 +414,7 @@
             that.options.afterSelect.call(this, value);
           }
         }
+        this.sort();
       }
     },
 
@@ -477,6 +494,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;
@@ -518,7 +546,8 @@
     disabledClass : 'disabled',
     dblClick : false,
     keepOrder: false,
-    cssClass: ''
+    cssClass: '',
+    sortable: false
   };
 
   $.fn.multiSelect.Constructor = MultiSelect;

From 0511145b5443a45894aa17a3ea22bcd26b5f3a8a Mon Sep 17 00:00:00 2001
From: christianmagill <christianmagill@gmail.com>
Date: Tue, 9 Aug 2016 14:56:00 -0400
Subject: [PATCH 2/3] jQuery UI Sortable "Clone" Helper for Firefox Issues.

This commit solves an issue with jQuery UI where dragging an item causes a click event which results in the item being deselected.
---
 js/jquery.multi-select.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js
index 282b8b0..a718c98 100644
--- a/js/jquery.multi-select.js
+++ b/js/jquery.multi-select.js
@@ -93,7 +93,8 @@
               stop: function(event,ui){
                 that.sort();
               },
-              axis: "y"
+              axis: "y",
+              helper: "clone"
             });
             that.$selectionUl.disableSelection();
           } else {

From 40cf04bc8bc7551455e0447b70572a7440a4e5c7 Mon Sep 17 00:00:00 2001
From: Tim Schneider <tim.schneider@nb-dev.de>
Date: Mon, 7 Nov 2016 09:28:38 +0100
Subject: [PATCH 3/3] Changing cursor to be a move cursor over the sortable
 side.

---
 css/multi-select.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/css/multi-select.css b/css/multi-select.css
index 4c1b9e5..ba265cb 100644
--- a/css/multi-select.css
+++ b/css/multi-select.css
@@ -91,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;
+}