js: Add drag&drop functionality

configuration.php

@@ -57,3 +57,6 @@ $this->provideRestriction(
     'businessprocess/prefix',
     $this->translate('Restrict access to configurations with the given prefix')
 );
+
+$this->provideJsFile('behavior/sortable.js');
+$this->provideJsFile('vendor/jquery.fn.sortable.js');

public/css/module.less

@@ -23,6 +23,10 @@ div.bp {
   margin-bottom: 4px;
 }
 
+div.bp.sortable > .sortable-ghost {
+    opacity: 0.5;
+}
+
 .simulation div.bp {
     border-right: 1em solid @colorCriticalHandled;
     padding-right: 1em;
@@ -458,6 +462,11 @@ td > a > .badges {
     clear: both;
 }
 
+.tiles.sortable > .sortable-ghost {
+    opacity: 0.5;
+    border: .2em dashed black;
+}
+
 .tiles > div {
     color: white;
     width: 12em;

public/js/behavior/sortable.js

@@ -0,0 +1,41 @@
+/*! Icinga Web 2 | (c) 2018 Icinga Development Team | GPLv2+ */
+
+(function(Icinga, $) {
+
+    'use strict';
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    var Sortable = function (icinga) {
+        Icinga.EventListener.call(this, icinga);
+        this.on('rendered', this.onRendered, this);
+    };
+
+    Sortable.prototype = new Icinga.EventListener();
+
+    Sortable.prototype.onRendered = function(e) {
+        $(e.target).find('.sortable').each(function() {
+            var $el = $(this);
+            var options = {
+                onMove: function (/**Event*/ event, /**Event*/ originalEvent) {
+                    if (typeof this.options['filter'] !== 'undefined' && $(event.related).is(this.options['filter'])) {
+                        // Assumes the filtered item is either at the very start or end of the list and prevents the
+                        // user from dropping other items before (if at the very start) or after it.
+                        return false;
+                    }
+                }
+            };
+
+            $.each($el.data(), function (i, v) {
+                if (i.length > 8 && i.startsWith('sortable')) {
+                    options[i.charAt(8).toLowerCase() + i.substr(9)] = v;
+                }
+            });
+
+            $(this).sortable(options);
+        });
+    };
+
+    Icinga.Behaviors.Sortable = Sortable;
+
+})(Icinga, jQuery);

public/js/module.js

@@ -35,6 +35,7 @@
 
             this.module.on('click', 'div.tiles > div', this.tileClick);
             this.module.on('click', '.dashboard-tile', this.dashboardTileClick);
+            this.module.on('end', 'div.tiles.sortable', this.tileDropped);
 
             this.module.icinga.logger.debug('BP module initialized');
         },
@@ -89,6 +90,32 @@
             $(event.currentTarget).find('> .bp-link > a').first().trigger('click');
         },
 
+        tileDropped: function(event) {
+            var evt = event.originalEvent;
+            if (evt.oldIndex !== evt.newIndex) {
+                var $target = $(evt.to);
+                var actionUrl = icinga.utils.addUrlParams($target.data('actionUrl'), {
+                    action: 'move',
+                    movenode: $(evt.item).data('nodeName')
+                });
+
+                if (! $target.is('.few') && $('.addnew', $target).length === 2) {
+                    // This assumes we're not moving things between different lists
+                    evt.oldIndex -= 1;
+                    evt.newIndex -= 1;
+                }
+
+                var data = {
+                    csrfToken: $target.data('csrfToken'),
+                    movenode: 'movenode', // That's the submit button..
+                    from: evt.oldIndex,
+                    to: evt.newIndex
+                };
+
+                icinga.loader.loadUrl(actionUrl, $target.closest('.container'), data, 'post');
+            }
+        },
+
         /**
          * Add 'hovered' class to hovered title elements
          *