Adds sortable option to select2 tags input field

app/assets/javascripts/activeadmin_addons/all.js

@@ -457,6 +457,13 @@
         $(el).on("select2:select", onItemAdded);
         $(el).on("select2:unselect", onItemRemoved);
         $(el).select2(selectOptions);
+        if ($(el).data("sortable")) addSorting();
+        function addSorting() {
+          $(el).next().find("ul.select2-selection__rendered").sortable({
+            containment: "parent",
+            update: fillHiddenInput
+          });
+        }
         function getSelectedItems() {
           var choices = $(el).parent("li.input").find(".select2-selection__choice");
           return $.map(choices, function(item) {

app/inputs/tags_input.rb

@@ -13,6 +13,7 @@ def load_control_attributes
     load_data_attr(:model, value: model_name)
     load_data_attr(:method, value: method)
     load_data_attr(:width, default: "80%")
+    load_data_attr(:sortable)
 
     if active_record_select?
       load_data_attr(:relation, value: true)

app/javascript/activeadmin_addons/inputs/tags.js

@@ -30,6 +30,15 @@ var initializer = function() {
       $(el).on('select2:unselect', onItemRemoved);
       $(el).select2(selectOptions);
 
+      if ($(el).data('sortable')) addSorting()
+
+      function addSorting() {
+        $(el).next().find('ul.select2-selection__rendered').sortable({
+          containment: 'parent',
+          update: fillHiddenInput
+        })
+      }
+
       function getSelectedItems() {
         var choices = $(el).parent('li.input').find('.select2-selection__choice');
         return $.map(choices, function(item) {

docs/select2_tags.md

@@ -43,3 +43,4 @@ f.input :performer_ids, as: :tags, collection: Performer.all, display_name: :ful
 * `display_name`: **(optional)** You can pass an optional `display_name` to set the attribute (or method) to show results on the select. It **defaults to**: `name`
 * `value`: **(optional)** You can pass an optional `value` to set the attribute (or method) to use when an item is selected. It **defaults to**: `id`
 * `width`: **(optional)** You can set the select input width (px or %).
+* `sortable`: **(optional)** It **defaults** to: `false`

lib/activeadmin_addons/support/input_helpers/select_helpers.rb

@@ -6,7 +6,7 @@ module SelectHelpers
     def array_to_select_options
       selected_values = input_value.is_a?(Array) ? input_value : input_value.to_s.split(",")
       array = collection.map(&:to_s) + selected_values
-      array.sort.map do |value|
+      array.map do |value|
         option = { id: value, text: value }
         option[:selected] = "selected" if selected_values.include?(value)
         option

package.json

@@ -1,6 +1,6 @@
 {
   "name": "activeadmin_addons",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Set of addons to help with the activeadmin ui",
   "main": "src/all.js",
   "files": [