Add handle to move tasks on touch devices

ChangeLog

@@ -22,6 +22,7 @@ New features:
 
 Improvements:
 
+* Add handle to move tasks on touch devices
 * Improve file attachments tooltip on the board
 * Adjust automatically the height of the placeholder during drag and drop
 * Show all tasks when using no search criteria

Makefile

@@ -5,7 +5,7 @@ CSS_PRINT = $(addprefix assets/css/src/, $(addsuffix .css, print links table boa
 CSS_VENDOR = $(addprefix assets/css/vendor/, $(addsuffix .css, jquery-ui.min jquery-ui-timepicker-addon.min chosen.min fullcalendar.min font-awesome.min c3.min))
 
 JS_APP = $(addprefix assets/js/src/, $(addsuffix .js, Popover Dropdown Tooltip Markdown Sidebar Search App Screenshot Calendar Board Swimlane Gantt TaskRepartitionChart UserRepartitionChart CumulativeFlowDiagram BurndownChart BudgetChart AvgTimeColumnChart TaskTimeColumnChart LeadCycleTimeChart Router))
-JS_VENDOR = $(addprefix assets/js/vendor/, $(addsuffix .js, jquery-1.11.1.min jquery-ui.min jquery-ui-timepicker-addon.min chosen.jquery.min moment.min fullcalendar.min mousetrap.min mousetrap-global-bind.min))
+JS_VENDOR = $(addprefix assets/js/vendor/, $(addsuffix .js, jquery-1.11.1.min jquery-ui.min jquery-ui-timepicker-addon.min jquery.ui.touch-punch.min chosen.jquery.min moment.min fullcalendar.min mousetrap.min mousetrap-global-bind.min))
 JS_LANG = $(addprefix assets/js/vendor/lang/, $(addsuffix .js, da de es fi fr hu it ja nl nb pl pt pt-br ru sv sr th tr zh-cn))
 
 all: css js

app/Template/board/task_private.php

@@ -8,6 +8,7 @@
      data-due-date="<?= $task['date_due'] ?>"
      data-task-url="<?= $this->url->href('task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
 
+    <div class="task-board-sort-handle" style="display: none;"><i class="fa fa-arrows-alt"></i></div>
     <?= $this->render('board/task_menu', array('task' => $task)) ?>
 
     <?php if ($this->board->isCollapsed($project['id'])): ?>

assets/css/src/board.css

@@ -147,3 +147,8 @@ a.board-swimlane-toggle {
 div.draggable-item-selected {
     border: 1px solid #000;
 }
+
+.task-board-sort-handle {
+    float: left;
+    padding-right: 5px;
+}

assets/js/src/Board.js

@@ -111,7 +111,7 @@ Board.prototype.resizeColumnHeight = function() {
 
 Board.prototype.dragAndDrop = function() {
     var self = this;
-    $(".board-task-list").sortable({
+    var params = {
         forcePlaceholderSize: true,
         delay: 300,
         distance: 5,
@@ -131,7 +131,14 @@ Board.prototype.dragAndDrop = function() {
             ui.item.addClass("draggable-item-selected");
             ui.placeholder.height(ui.item.height());
         }
-    });
+    };
+
+    if ($.support.touch) {
+        $(".task-board-sort-handle").css("display", "inline");
+        params["handle"] = ".task-board-sort-handle";
+    }
+
+    $(".board-task-list").sortable(params);
 };
 
 Board.prototype.listen = function() {