Improve subtask toggle

1 files changed, 44 insertions, 0 deletions

diff --git a/assets/js/components/subtask-drag-and-drop.js b/assets/js/components/subtask-drag-and-drop.js
new file mode 100644
index 00000000..f704376a
--- /dev/null
+++ b/assets/js/components/subtask-drag-and-drop.js
@@ -0,0 +1,44 @@
+KB.on('dom.ready', function() {
+
+    function savePosition(subtaskId, position) {
+        var url = $(".subtasks-table").data("save-position-url");
+
+        $.ajax({
+            cache: false,
+            url: url,
+            contentType: "application/json",
+            type: "POST",
+            processData: false,
+            data: JSON.stringify({
+                "subtask_id": subtaskId,
+                "position": position
+            })
+        });
+    }
+
+    $(".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");
+            savePosition(subtask.data("subtask-id"), subtask.index() + 1);
+        },
+        start: function(event, ui) {
+            ui.item.addClass("draggable-item-selected");
+        }
+    }).disableSelection();
+});