Add drag and drop to change column positions

2 files changed, 61 insertions, 0 deletions

diff --git a/assets/js/src/App.js b/assets/js/src/App.js
index b7ac1a6c..44564629 100644
--- a/assets/js/src/App.js
+++ b/assets/js/src/App.js
@@ -9,6 +9,7 @@ function App() {
     this.task = new Task();
     this.project = new Project();
     this.subtask = new Subtask(this);
+    this.column = new Column(this);
     this.file = new FileUpload(this);
     this.keyboardShortcuts();
     this.chosen();
@@ -40,6 +41,7 @@ App.prototype.listen = function() {
     this.task.listen();
     this.swimlane.listen();
     this.subtask.listen();
+    this.column.listen();
     this.file.listen();
     this.search.focus();
     this.autoComplete();
diff --git a/assets/js/src/Column.js b/assets/js/src/Column.js
new file mode 100644
index 00000000..2c8ebbd2
--- /dev/null
+++ b/assets/js/src/Column.js
@@ -0,0 +1,59 @@
+function Column(app) {
+    this.app = app;
+}
+
+Column.prototype.listen = function() {
+    this.dragAndDrop();
+};
+
+Column.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");
+    });
+
+    $(".columns-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 column = ui.item;
+            column.removeClass("draggable-item-selected");
+            self.savePosition(column.data("column-id"), column.index() + 1);
+        },
+        start: function(event, ui) {
+            ui.item.addClass("draggable-item-selected");
+        }
+    }).disableSelection();
+};
+
+Column.prototype.savePosition = function(columnId, position) {
+    var url = $(".columns-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({
+            "column_id": columnId,
+            "position": position
+        }),
+        complete: function() {
+            self.app.hideLoadingIcon();
+        }
+    });
+};