From 83b7eb16d05e7a8a0aac806793b810ac3fb602d6 Mon Sep 17 00:00:00 2001
From: James Homer <jameshomer85@gmail.com>
Date: Wed, 11 Feb 2015 17:49:39 +0000
Subject: [PATCH 1/2] Allow sorting of multiple select

---
 examples/demo-multi-select.html       |   4 +-
 examples/demo-tagging.html            |   4 +-
 examples/select2-bootstrap3.html      |  15 +++
 src/bootstrap/match-multiple.tpl.html |   4 +-
 src/select.css                        |  31 +++++-
 src/select.js                         | 142 ++++++++++++++++++++++++++
 src/select2/match-multiple.tpl.html   |   3 +-
 7 files changed, 194 insertions(+), 9 deletions(-)

diff --git a/examples/demo-multi-select.html b/examples/demo-multi-select.html
index 4246aa988..81cf4de79 100644
--- a/examples/demo-multi-select.html
+++ b/examples/demo-multi-select.html
@@ -121,8 +121,8 @@ <h3>Array of strings</h3>
   </ui-select>
   <p>Selected: {{multipleDemo.colors}}</p>
   <hr>
-  <h3>Array of objects</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <h3>Array of objects (sorting enabled)</h3>
+  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sort-enabled="true" close-on-select="false" style="width: 800px;">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
diff --git a/examples/demo-tagging.html b/examples/demo-tagging.html
index b2cc6cf7a..3ca339f7d 100644
--- a/examples/demo-tagging.html
+++ b/examples/demo-tagging.html
@@ -65,8 +65,8 @@
   <h1>Tagging Demos</h1>
 
   <h3>Simple String Tags</h3>
-  <h4>(With Custom Tag Label)</h4>
-  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
+  <h4>(With Custom Tag Label / Sort Enabled)</h4>
+  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" sort-enabled="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
diff --git a/examples/select2-bootstrap3.html b/examples/select2-bootstrap3.html
index 4febfa396..9db76eef3 100644
--- a/examples/select2-bootstrap3.html
+++ b/examples/select2-bootstrap3.html
@@ -64,6 +64,21 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">Multiple</label>
+        <div class="col-sm-6">
+
+          <ui-select multiple sort-enabled="true" ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
+            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
+            <ui-select-choices repeat="item in people | filter: $select.search">
+              <div ng-bind-html="item.name | highlight: $select.search"></div>
+              <small ng-bind-html="item.email | highlight: $select.search"></small>
+            </ui-select-choices>
+          </ui-select>
+
+        </div>
+      </div>
+
       <div class="form-group">
         <label class="col-sm-3 control-label">Grouped</label>
         <div class="col-sm-6">
diff --git a/src/bootstrap/match-multiple.tpl.html b/src/bootstrap/match-multiple.tpl.html
index f303016e4..3e60ccd0d 100644
--- a/src/bootstrap/match-multiple.tpl.html
+++ b/src/bootstrap/match-multiple.tpl.html
@@ -1,13 +1,13 @@
 <span class="ui-select-match">
   <span ng-repeat="$item in $select.selected">
     <span 
-      style="margin-right: 3px;"
       class="ui-select-match-item btn btn-default btn-xs"
       tabindex="-1"
       type="button"
       ng-disabled="$select.disabled"
       ng-click="$select.activeMatchIndex = $index;"
-      ng-class="{'btn-primary':$select.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}">
+      ng-class="{'btn-primary':$select.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}"
+      ui-select-sort="$select.selected">
         <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$select.removeChoice($index)">&nbsp;&times;</span>
         <span uis-transclude-append></span>
     </span>
diff --git a/src/select.css b/src/select.css
index c5aecbd2a..c284e6d98 100644
--- a/src/select.css
+++ b/src/select.css
@@ -121,11 +121,12 @@
   height: auto;
   max-height: 200px;
   overflow-x: hidden;
+  margin-top: -1px;
 }
 
 .ui-select-multiple.ui-select-bootstrap {
   height: auto;
-  padding: .3em;
+  padding: 3px 3px 0 3px;
 }
 
 .ui-select-multiple.ui-select-bootstrap input.ui-select-search {
@@ -133,6 +134,7 @@
   border: none;
   outline: none;
   height: 1.666666em;
+  margin-bottom: 3px;
 }
 
 .ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
@@ -140,8 +142,33 @@
   line-height: 0.75;
 }
 
-.ui-select-multiple.ui-select-bootstrap .ui-select-match-item{
+.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
   outline: 0;
+  margin: 0 3px 3px 0;
+}
+
+.ui-select-multiple .ui-select-match-item {
+  position: relative;
+}
+
+.ui-select-multiple .ui-select-match-item.dropping-before:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 100%;
+  height: 100%;
+  margin-right: 2px;
+  border-left: 1px solid #428bca;
+}
+
+.ui-select-multiple .ui-select-match-item.dropping-after:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  margin-left: 2px;
+  border-right: 1px solid #428bca;
 }
 
 .ui-select-bootstrap .ui-select-choices-row>a {
diff --git a/src/select.js b/src/select.js
index f8906c235..071c7a79e 100644
--- a/src/select.js
+++ b/src/select.js
@@ -90,6 +90,7 @@
   .constant('uiSelectConfig', {
     theme: 'bootstrap',
     searchEnabled: true,
+    sortEnabled: false,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000, // In milliseconds
     closeOnSelect: true,
@@ -183,6 +184,7 @@
     ctrl.focusser = undefined; //Reference to input element used to handle focus events
     ctrl.disabled = undefined; // Initialized inside uiSelect directive link function
     ctrl.searchEnabled = undefined; // Initialized inside uiSelect directive link function
+    ctrl.sortEnabled = undefined; // Initialized inside uiSelect directive link function
     ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
     ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
     ctrl.multiple = false; // Initialized inside uiSelect directive link function
@@ -1078,6 +1080,11 @@
             $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : uiSelectConfig.searchEnabled;
         });
 
+        scope.$watch('sortEnabled', function() {
+            var sortEnabled = scope.$eval(attrs.sortEnabled);
+            $select.sortEnabled = sortEnabled !== undefined ? sortEnabled : uiSelectConfig.sortEnabled;
+        });
+
         attrs.$observe('disabled', function() {
           // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
           $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;
@@ -1317,6 +1324,141 @@
     };
   }])
 
+  // Make multiple matches sortable
+  .directive('uiSelectSort', ['$timeout', '$log', 'uiSelectConfig', 'uiSelectMinErr', function($timeout, $log, uiSelectConfig, uiSelectMinErr) {
+    return {
+      require: '^uiSelect',
+      link: function(scope, element, attrs, $select) {
+        if (scope[attrs.uiSelectSort] === null) {
+          throw uiSelectMinErr('sort', "Expected a list to sort");
+        }
+
+        var options = angular.extend({
+            axis: 'horizontal'
+          },
+          scope.$eval(attrs.uiSelectSortOptions));
+
+        var axis = options.axis,
+          draggingClassName = 'dragging',
+          droppingClassName = 'dropping',
+          droppingBeforeClassName = 'dropping-before',
+          droppingAfterClassName = 'dropping-after';
+
+        scope.$watch(function(){
+          return $select.sortEnabled;
+        }, function(n){
+          $log.log(n);
+          if (n) {
+            element.attr('draggable', true);
+          } else {
+            element.removeAttr('draggable');
+          }
+        });
+
+        element.on('dragstart', function(e) {
+          element.addClass(draggingClassName);
+
+          (e.dataTransfer || e.originalEvent.dataTransfer).setData('text/plain', scope.$index);
+        });
+
+        element.on('dragend', function() {
+          element.removeClass(draggingClassName);
+        });
+
+        var move = function(from, to) {
+          /*jshint validthis: true */
+          this.splice(to, 0, this.splice(from, 1)[0]);
+        };
+
+        var dragOverHandler = function(e) {
+          e.preventDefault();
+
+          var offset = axis === 'vertical' ? e.offsetY || e.layerY || (e.originalEvent ? e.originalEvent.offsetY : 0) : e.offsetX || e.layerX || (e.originalEvent ? e.originalEvent.offsetX : 0);
+
+          if (offset < (this[axis === 'vertical' ? 'offsetHeight' : 'offsetWidth'] / 2)) {
+            element.removeClass(droppingAfterClassName);
+            element.addClass(droppingBeforeClassName);
+
+          } else {
+            element.removeClass(droppingBeforeClassName);
+            element.addClass(droppingAfterClassName);
+          }
+        };
+
+        var dropTimeout;
+
+        var dropHandler = function(e) {
+          e.preventDefault();
+
+          var droppedItemIndex = parseInt((e.dataTransfer || e.originalEvent.dataTransfer).getData('text/plain'), 10);
+
+          // prevent event firing multiple times in firefox
+          $timeout.cancel(dropTimeout);
+          dropTimeout = $timeout(function() {
+            _dropHandler(droppedItemIndex);
+          }, 20);
+        };
+
+        var _dropHandler = function(droppedItemIndex) {
+          var theList = scope.$eval(attrs.uiSelectSort),
+            itemToMove = theList[droppedItemIndex],
+            newIndex = null;
+
+          if (element.hasClass(droppingBeforeClassName)) {
+            if (droppedItemIndex < scope.$index) {
+              newIndex = scope.$index - 1;
+            } else {
+              newIndex = scope.$index;
+            }
+          } else {
+            if (droppedItemIndex < scope.$index) {
+              newIndex = scope.$index;
+            } else {
+              newIndex = scope.$index + 1;
+            }
+          }
+
+          move.apply(theList, [droppedItemIndex, newIndex]);
+
+          scope.$apply(function() {
+            scope.$emit('uiSelectSort:change', {
+              array: theList,
+              item: itemToMove,
+              from: droppedItemIndex,
+              to: newIndex
+            });
+          });
+
+          element.removeClass(droppingClassName);
+          element.removeClass(droppingBeforeClassName);
+          element.removeClass(droppingAfterClassName);
+
+          element.off('drop', dropHandler);
+        };
+
+        element.on('dragenter', function() {
+          if (element.hasClass(draggingClassName)) {
+            return;
+          }
+
+          element.addClass(droppingClassName);
+
+          element.on('dragover', dragOverHandler);
+          element.on('drop', dropHandler);
+        });
+
+        element.on('dragleave', function() {
+          element.removeClass(droppingClassName);
+          element.removeClass(droppingBeforeClassName);
+          element.removeClass(droppingAfterClassName);
+
+          element.off('dragover', dragOverHandler);
+          element.off('drop', dropHandler);
+        });
+      }
+    };
+  }])
+
   /**
    * Highlights text that matches $select.search.
    *
diff --git a/src/select2/match-multiple.tpl.html b/src/select2/match-multiple.tpl.html
index e1578c0ba..b18f54933 100644
--- a/src/select2/match-multiple.tpl.html
+++ b/src/select2/match-multiple.tpl.html
@@ -5,7 +5,8 @@
 -->
 <span class="ui-select-match">
   <li class="ui-select-match-item select2-search-choice" ng-repeat="$item in $select.selected" 
-      ng-class="{'select2-search-choice-focus':$select.activeMatchIndex === $index, 'select2-locked':$select.isLocked(this, $index)}">
+      ng-class="{'select2-search-choice-focus':$select.activeMatchIndex === $index, 'select2-locked':$select.isLocked(this, $index)}"
+      ui-select-sort="$select.selected">
       <span uis-transclude-append></span>
       <a href="javascript:;" class="ui-select-match-close select2-search-choice-close" ng-click="$select.removeChoice($index)" tabindex="-1"></a>
   </li>

From fb3d343455eea7d0a3c705345fe35c335a54ff78 Mon Sep 17 00:00:00 2001
From: James Homer <jameshomer85@gmail.com>
Date: Thu, 19 Feb 2015 22:43:40 +0000
Subject: [PATCH 2/2] change `sort-enabled` to `sortable`, prevent drop in
 search input

---
 examples/demo-multi-select.html        |  2 +-
 examples/demo-tagging.html             |  2 +-
 examples/select2-bootstrap3.html       |  2 +-
 src/bootstrap/select-multiple.tpl.html |  3 ++-
 src/select.js                          | 15 +++++++--------
 src/select2/select-multiple.tpl.html   |  3 ++-
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/examples/demo-multi-select.html b/examples/demo-multi-select.html
index 81cf4de79..ed1e6e27a 100644
--- a/examples/demo-multi-select.html
+++ b/examples/demo-multi-select.html
@@ -122,7 +122,7 @@ <h3>Array of strings</h3>
   <p>Selected: {{multipleDemo.colors}}</p>
   <hr>
   <h3>Array of objects (sorting enabled)</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sort-enabled="true" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sortable="true" close-on-select="false" style="width: 800px;">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
diff --git a/examples/demo-tagging.html b/examples/demo-tagging.html
index 3ca339f7d..a915314c2 100644
--- a/examples/demo-tagging.html
+++ b/examples/demo-tagging.html
@@ -66,7 +66,7 @@ <h1>Tagging Demos</h1>
 
   <h3>Simple String Tags</h3>
   <h4>(With Custom Tag Label / Sort Enabled)</h4>
-  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" sort-enabled="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
+  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
diff --git a/examples/select2-bootstrap3.html b/examples/select2-bootstrap3.html
index 9db76eef3..c898e38eb 100644
--- a/examples/select2-bootstrap3.html
+++ b/examples/select2-bootstrap3.html
@@ -68,7 +68,7 @@
         <label class="col-sm-3 control-label">Multiple</label>
         <div class="col-sm-6">
 
-          <ui-select multiple sort-enabled="true" ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
+          <ui-select multiple sortable="true" ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
diff --git a/src/bootstrap/select-multiple.tpl.html b/src/bootstrap/select-multiple.tpl.html
index a5a4d0200..26f2c7dbf 100644
--- a/src/bootstrap/select-multiple.tpl.html
+++ b/src/bootstrap/select-multiple.tpl.html
@@ -13,7 +13,8 @@
            ng-click="$select.activate()"
            ng-model="$select.search"
            role="combobox"
-           aria-label="{{ $select.baseTitle }}">
+           aria-label="{{ $select.baseTitle }}"
+           ondrop="return false;">
   </div>
   <div class="ui-select-choices"></div>
 </div>
diff --git a/src/select.js b/src/select.js
index 071c7a79e..eaf5c7d94 100644
--- a/src/select.js
+++ b/src/select.js
@@ -90,7 +90,7 @@
   .constant('uiSelectConfig', {
     theme: 'bootstrap',
     searchEnabled: true,
-    sortEnabled: false,
+    sortable: false,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000, // In milliseconds
     closeOnSelect: true,
@@ -184,7 +184,7 @@
     ctrl.focusser = undefined; //Reference to input element used to handle focus events
     ctrl.disabled = undefined; // Initialized inside uiSelect directive link function
     ctrl.searchEnabled = undefined; // Initialized inside uiSelect directive link function
-    ctrl.sortEnabled = undefined; // Initialized inside uiSelect directive link function
+    ctrl.sortable = undefined; // Initialized inside uiSelect directive link function
     ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
     ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
     ctrl.multiple = false; // Initialized inside uiSelect directive link function
@@ -1080,9 +1080,9 @@
             $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : uiSelectConfig.searchEnabled;
         });
 
-        scope.$watch('sortEnabled', function() {
-            var sortEnabled = scope.$eval(attrs.sortEnabled);
-            $select.sortEnabled = sortEnabled !== undefined ? sortEnabled : uiSelectConfig.sortEnabled;
+        scope.$watch('sortable', function() {
+            var sortable = scope.$eval(attrs.sortable);
+            $select.sortable = sortable !== undefined ? sortable : uiSelectConfig.sortable;
         });
 
         attrs.$observe('disabled', function() {
@@ -1325,7 +1325,7 @@
   }])
 
   // Make multiple matches sortable
-  .directive('uiSelectSort', ['$timeout', '$log', 'uiSelectConfig', 'uiSelectMinErr', function($timeout, $log, uiSelectConfig, uiSelectMinErr) {
+  .directive('uiSelectSort', ['$timeout', 'uiSelectConfig', 'uiSelectMinErr', function($timeout, uiSelectConfig, uiSelectMinErr) {
     return {
       require: '^uiSelect',
       link: function(scope, element, attrs, $select) {
@@ -1345,9 +1345,8 @@
           droppingAfterClassName = 'dropping-after';
 
         scope.$watch(function(){
-          return $select.sortEnabled;
+          return $select.sortable;
         }, function(n){
-          $log.log(n);
           if (n) {
             element.attr('draggable', true);
           } else {
diff --git a/src/select2/select-multiple.tpl.html b/src/select2/select-multiple.tpl.html
index 774a02af3..6d8ed0d19 100644
--- a/src/select2/select-multiple.tpl.html
+++ b/src/select2/select-multiple.tpl.html
@@ -21,7 +21,8 @@
         ng-hide="$select.disabled"
         ng-model="$select.search"
         ng-click="$select.activate()"
-        style="width: 34px;">
+        style="width: 34px;"
+        ondrop="return false;">
     </li>
   </ul>
   <div class="select2-drop select2-with-searchbox select2-drop-active"