fix: kanban cards dragging when on touch devices

css/tickets_kanban.css

@@ -32,4 +32,10 @@
     margin: 5px 0;
     padding: 10px;
     border: 1px solid #ddd;
+    user-select: none; /* Prevent text selection */
+}
+
+.drag-handle-class {
+    touch-action: none;
+    float: right;
 }

js/tickets_kanban.js

@@ -1,6 +1,12 @@
 $(document).ready(function() {
     console.log('CONFIG_TICKET_MOVING_COLUMNS: ' + CONFIG_TICKET_MOVING_COLUMNS);
     console.log('CONFIG_TICKET_ORDERING: ' + CONFIG_TICKET_ORDERING);
+
+    // Function to detect touch devices
+    function isTouchDevice() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints;
+    }
+
     // Initialize Dragula for the Kanban board
     let boardDrake = dragula([
         document.querySelector('#kanban-board')
@@ -54,8 +60,30 @@ $(document).ready(function() {
     // Initialize Dragula for the Kanban Cards
     let drake = dragula([
         ...document.querySelectorAll('#status')
-    ]);
+    ], {
+        moves: function(el, container, handle) {
+            if (isTouchDevice()) {
+                return handle.classList.contains('drag-handle-class');
+            } else {
+                return true; // Allow dragging on the entire task element for desktop
+            }
+        }
+    });
 
+    if (isTouchDevice()) {
+        const moveList = document.querySelectorAll('.task');
+        moveList.forEach(task => {
+            task.querySelector('.drag-handle-class').style.display = 'inline';
+        });
+    }
+
+    drake.on('drag', function(el) {
+        el.style.cursor = 'grabbing';
+    });
+    
+    drake.on('dragend', function(el) {
+        el.style.cursor = 'grab';
+    });
     // Add event listener for the drop event
     drake.on('drop', function (el, target, source, sibling) {
         // Log the target ID to the console

tickets_kanban.php

@@ -95,11 +95,10 @@ $kanban = array_values($statuses);
             ?>
             
             <div
-                class="task"
+                class="task grab-cursor"
                 data-ticket-id= "<?=$item['ticket_id']?>"
                 data-ticket-status-id= "<?=$item['ticket_status_id']?>"
                 ondblclick="window.location.href='ticket.php?ticket_id=<?php echo $item['ticket_id']; ?>'"
-                style="cursor: grabbing;"
             >
                 <span class='badge badge-<?php echo $ticket_priority_color; ?>'>
                     <?php echo $item['ticket_priority']; ?>
@@ -107,8 +106,10 @@ $kanban = array_values($statuses);
                 <span class='badge badge-secondary'>
                     <?php echo $item['category_name']; ?>
                 </span>
+                <div class='btn btn-secondary drag-handle-class' style="display: none;">
+                    <i class="drag-handle-class fas fa-bars"></i>
+                </div>
                 <br>
-                
                 <b>
                     <?php
                         if (!$client_url) {