Add subtasks drag and drop

assets/css/src/table.css

@@ -62,7 +62,7 @@ th a:hover {
     text-overflow: ellipsis;
 }
 
-.table-stripped tr:nth-child(odd) td {
+.table-stripped tr:nth-child(odd) {
     background: #fefefe;
 }
 
@@ -124,4 +124,38 @@ th a:hover {
 
 .column-70 {
     width: 70%;
-}
+}
+
+.draggable-row-handle {
+    cursor: move;
+    color: #dedede;
+}
+
+.draggable-row-handle:hover {
+    color: #333;
+}
+
+tr.draggable-item-selected {
+    background: #fff;
+    border: 2px solid #666;
+    box-shadow: 4px 2px 10px -4px rgba(0,0,0,0.55);
+}
+
+tr.draggable-item-selected td {
+    border-top: none;
+    border-bottom: none;
+}
+
+tr.draggable-item-selected td:first-child {
+    border-left: none;
+}
+
+tr.draggable-item-selected td:last-child {
+    border-right: none;
+}
+
+.table-stripped tr.draggable-item-hover,
+tr.draggable-item-hover {
+    background: #FEFFF2;
+}
+

assets/js/src/App.js

@@ -8,7 +8,7 @@ function App() {
     this.popover = new Popover(this);
     this.task = new Task();
     this.project = new Project();
-    this.subtask = new Subtask();
+    this.subtask = new Subtask(this);
     this.file = new FileUpload(this);
     this.keyboardShortcuts();
     this.chosen();

assets/js/src/Subtask.js

@@ -1,7 +1,12 @@
-function Subtask() {
+function Subtask(app) {
+    this.app = app;
 }
 
 Subtask.prototype.listen = function() {
+    var self = this;
+
+    this.dragAndDrop();
+
     $(document).on("click", ".subtask-toggle-status", function(e) {
         e.preventDefault();
         var el = $(this);
@@ -15,6 +20,8 @@ Subtask.prototype.listen = function() {
                 } else {
                     el.replaceWith(data);
                 }
+
+                self.dragAndDrop();
             }
         });
     });
@@ -28,7 +35,60 @@ Subtask.prototype.listen = function() {
             url: el.attr("href"),
             success: function(data) {
                 $(".subtasks-table").replaceWith(data);
+                self.dragAndDrop();
             }
         });
     });
 };
+
+Subtask.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");
+    });
+
+    $(".subtasks-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 subtask = ui.item;
+            subtask.removeClass("draggable-item-selected");
+            self.savePosition(subtask.data("subtask-id"), subtask.index() + 1);
+        },
+        start: function(event, ui) {
+            ui.item.addClass("draggable-item-selected");
+        }
+    }).disableSelection();
+};
+
+Subtask.prototype.savePosition = function(subtaskId, position) {
+    var url = $(".subtasks-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({
+            "subtask_id": subtaskId,
+            "position": position
+        }),
+        complete: function() {
+            self.app.hideLoadingIcon();
+        }
+    });
+};