Add drag and drop to change swimlane positions

2 files changed, 56 insertions, 2 deletions

diff --git a/assets/js/src/App.js b/assets/js/src/App.js
index 44564629..66a0c81c 100644
--- a/assets/js/src/App.js
+++ b/assets/js/src/App.js
@@ -2,7 +2,7 @@ function App() {
     this.board = new Board(this);
     this.markdown = new Markdown();
     this.search = new Search(this);
-    this.swimlane = new Swimlane();
+    this.swimlane = new Swimlane(this);
     this.dropdown = new Dropdown();
     this.tooltip = new Tooltip(this);
     this.popover = new Popover(this);
diff --git a/assets/js/src/Swimlane.js b/assets/js/src/Swimlane.js
index 340b40a0..60dbf41f 100644
--- a/assets/js/src/Swimlane.js
+++ b/assets/js/src/Swimlane.js
@@ -1,4 +1,5 @@
-function Swimlane() {
+function Swimlane(app) {
+    this.app = app;
 }
 
 Swimlane.prototype.getStorageKey = function() {
@@ -53,6 +54,7 @@ Swimlane.prototype.refresh = function() {
 
 Swimlane.prototype.listen = function() {
     var self = this;
+    self.dragAndDrop();
 
     $(document).on('click', ".board-swimlane-toggle", function(e) {
         e.preventDefault();
@@ -67,3 +69,55 @@ Swimlane.prototype.listen = function() {
         }
     });
 };
+
+Swimlane.prototype.dragAndDrop = function() {
+    var self = this;
+
+    $(".draggable-row-handle").mouseenter(function() {
+        $(this).parent().parent().addClass("draggable-item-hover");
+    }).mouseleave(function() {
+        $(this).parent().parent().removeClass("draggable-item-hover");
+    });
+
+    $(".swimlanes-table tbody").sortable({
+        forcePlaceholderSize: true,
+        handle: "td:first i",
+        helper: function(e, ui) {
+            ui.children().each(function() {
+                $(this).width($(this).width());
+            });
+
+            return ui;
+        },
+        stop: function(event, ui) {
+            var swimlane = ui.item;
+            swimlane.removeClass("draggable-item-selected");
+            self.savePosition(swimlane.data("swimlane-id"), swimlane.index() + 1);
+        },
+        start: function(event, ui) {
+            ui.item.addClass("draggable-item-selected");
+        }
+    }).disableSelection();
+};
+
+Swimlane.prototype.savePosition = function(swimlaneId, position) {
+    var url = $(".swimlanes-table").data("save-position-url");
+    var self = this;
+
+    this.app.showLoadingIcon();
+
+    $.ajax({
+        cache: false,
+        url: url,
+        contentType: "application/json",
+        type: "POST",
+        processData: false,
+        data: JSON.stringify({
+            "swimlane_id": swimlaneId,
+            "position": position
+        }),
+        complete: function() {
+            self.app.hideLoadingIcon();
+        }
+    });
+};