FEATURE: Can order value lists

app/assets/javascripts/admin/components/value-list.js.es6

@@ -1,6 +1,65 @@
 export default Ember.Component.extend({
   classNameBindings: [':value-list'],
 
+  _enableSorting: function() {
+    const self = this;
+    const placeholder = document.createElement("div");
+    placeholder.className = "placeholder";
+
+    let dragging = null;
+    let over = null;
+    let nodePlacement;
+
+    this.$().on('dragstart.discourse', '.values .value', function(e) {
+      dragging = e.currentTarget;
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData("text/html", e.currentTarget);
+    });
+
+    this.$().on('dragend.discourse', '.values .value', function() {
+      Ember.run(function() {
+        dragging.parentNode.removeChild(placeholder);
+        dragging.style.display = 'block';
+
+        // Update data
+        const from = Number(dragging.dataset.index);
+        let to = Number(over.dataset.index);
+        if (from < to) to--;
+        if (nodePlacement === "after") to++;
+
+        const collection = self.get('collection');
+        const fromObj = collection.objectAt(from);
+        collection.replace(from, 1);
+        collection.replace(to, 0, [fromObj]);
+        self._saveValues();
+      });
+      return false;
+    });
+
+    this.$().on('dragover.discourse', '.values', function(e) {
+      e.preventDefault();
+      dragging.style.display = 'none';
+      if (e.target.className === "placeholder") { return; }
+      over = e.target;
+
+      const relY = e.originalEvent.clientY - over.offsetTop;
+      const height = over.offsetHeight / 2;
+      const parent = e.target.parentNode;
+
+      if (relY > height) {
+        nodePlacement = "after";
+        parent.insertBefore(placeholder, e.target.nextElementSibling);
+      } else if(relY < height) {
+        nodePlacement = "before";
+        parent.insertBefore(placeholder, e.target);
+      }
+    });
+  }.on('didInsertElement'),
+
+  _removeSorting: function() {
+    this.$().off('dragover.discourse').off('dragend.discourse').off('dragstart.discourse');
+  }.on('willDestroyElement'),
+
   _setupCollection: function() {
     const values = this.get('values');
     if (this.get('inputType') === "array") {
@@ -10,13 +69,13 @@ export default Ember.Component.extend({
     }
   }.on('init').observes('values'),
 
-  _collectionChanged: function() {
+  _saveValues: function() {
     if (this.get('inputType') === "array") {
       this.set('values', this.get('collection'));
     } else {
       this.set('values', this.get('collection').join("\n"));
     }
-  }.observes('collection.@each'),
+  },
 
   inputInvalid: Ember.computed.empty('newValue'),
 
@@ -32,11 +91,14 @@ export default Ember.Component.extend({
 
       this.get('collection').addObject(this.get('newValue'));
       this.set('newValue', '');
+
+      this._saveValues();
     },
 
     removeValue(value) {
       const collection = this.get('collection');
       collection.removeObject(value);
+      this._saveValues();
     }
   }
 });

app/assets/javascripts/admin/templates/components/value-list.hbs

@@ -1,7 +1,7 @@
 {{#if collection}}
   <div class='values'>
-    {{#each collection as |value|}}
-      <div class='value'>
+    {{#each collection as |value index|}}
+      <div class='value' draggable='true' data-index={{index}}>
         {{d-button action="removeValue"
                    actionParam=value
                    icon="times"

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1488,12 +1488,21 @@ table#user-badges {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    cursor: move;
   }
 
   .values {
     margin-bottom: 10px;
   }
 
+  .placeholder {
+    border-bottom: 1px solid #ddd;
+    padding: 3px;
+    margin-right: 10px;
+    height: 30px;
+  }
+
   input[type=text] {
     width: 90%;
   }