It is now possible to sort via drag & drop the Array fields (fixes getgrav/grav#950)

CHANGELOG.md

@@ -8,6 +8,7 @@
     * Lists now features a new YAML option `controls: [top|bottom|both]` (default: bottom) which will display the "Add Item" button at the Top and/or Bottom position relative to the list. When the Top button is pressed, a new item will be added at the beginning of the list, when the Bottom button is pressed, a new item will be appended to the list.
     * Lists now features two new YAML options `sortby: [field]` (default: disabled) and `sortby_dir: [asc|desc]` (default: asc) which will display a new Sorting button in the list allowing to automatically reindex the collection based on the given sort field set.
     * Lists now features a new YAML option `collapsed: [true|false]` (default: false) and a new UI/UX that allows for collapsing / expanding collection items, allowing to better managing long lists of items. It is advised to always put as first field the most significant one, so that when a list is collapsed it can be still easily browsed.
+    * It is now possible to sort via drag & drop the Array fields [#950](https://github.com/getgrav/grav/issues/950)
 1. [](#bugfix)
     * Fixed issue in Admin favicon URL [#704](https://github.com/getgrav/grav-plugin-admin/issues/704)
     * Fixed issue in `selfupgrade` where the package would get downloaded in the wrong destination

themes/grav/app/forms/fields/array.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import Sortable from 'sortablejs';
 
 let body = $('body');
 
@@ -61,7 +62,26 @@ class Template {
 export default class ArrayField {
     constructor() {
         body.on('input', '[data-grav-array-type="key"], [data-grav-array-type="value"]', (event) => this.actionInput(event));
-        body.on('click touch', '[data-grav-array-action]', (event) => this.actionEvent(event));
+        body.on('click touch', '[data-grav-array-action]:not([data-grav-array-action="sort"])', (event) => this.actionEvent(event));
+
+        this.arrays = $();
+
+        $('[data-grav-field="array"]').each((index, list) => this.addArray(list));
+        $('body').on('mutation._grav', this._onAddedNodes.bind(this));
+    }
+
+    addArray(list) {
+        list = $(list);
+
+        list.find('[data-grav-array-type="container"]').each((index, container) => {
+            container = $(container);
+            if (container.data('array-sort') || container[0].hasAttribute('data-array-nosort')) { return; }
+
+            container.data('array-sort', new Sortable(container.get(0), {
+                handle: '.fa-bars',
+                animation: 150
+            }));
+        });
     }
 
     actionInput(event) {
@@ -142,6 +162,18 @@ export default class ArrayField {
             element.data('array-template', new Template(element.closest('[data-grav-array-name]')));
         }
     }
+
+    _onAddedNodes(event, target/* , record, instance */) {
+        let arrays = $(target).find('[data-grav-field="array"]');
+        if (!arrays.length) { return; }
+
+        arrays.each((index, list) => {
+            list = $(list);
+            if (!~this.arrays.index(list)) {
+                this.addArray(list);
+            }
+        });
+    }
 }
 
 export let Instance = new ArrayField();

themes/grav/scss/template/_forms.scss

@@ -310,11 +310,17 @@ form {
 
         .form-row {
             display: inline-block;
+            width: 100%;
             span {
                 padding: 0.5rem;
                 display: inline-block;
                 line-height: 1.7;
                 cursor: pointer;
+
+                &[data-grav-array-action="sort"] {
+                    float: left;
+                    cursor: move;
+                }
             }
 
             &.array-field-value_only {

themes/grav/templates/forms/fields/array/array.html.twig

@@ -10,6 +10,7 @@
 {% macro renderer(key, text, field, scope) %}
     <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}"
          data-grav-array-type="row">
+        <span data-grav-array-action="sort" class="fa fa-bars"></span>
         {% if field.value_only != true %}
             {% if key == '0' and text == '' %}
                 {% set key = '' %}