Try to disable dragging Swimlanes/Lists/Cards/Checklists/Subtasks on small mobile smartphones webbrowsers, and hide drag handles on mobile web.

Thanks to xet7 !

client/components/boards/boardBody.js

@@ -205,21 +205,19 @@ BlazeComponent.extendComponent({
       } else {
         showDesktopDragHandles = false;
       }
-      if (
+      if (!Utils.isMiniScreen() && showDesktopDragHandles) {
-        Utils.isMiniScreen() ||
-        (!Utils.isMiniScreen() && showDesktopDragHandles)
-      ) {
         $swimlanesDom.sortable({
           handle: '.js-swimlane-header-handle',
         });
-      } else {
+      } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
         $swimlanesDom.sortable({
           handle: '.swimlane-header',
         });
       }
 
-      // Disable drag-dropping if the current user is not a board member or is comment only
+      // Disable drag-dropping if the current user is not a board member or is miniscreen
       $swimlanesDom.sortable('option', 'disabled', !userIsMember());
+      $swimlanesDom.sortable('option', 'disabled', Utils.isMiniScreen());
     });
 
     function userIsMember() {

client/components/cards/cardDetails.js

@@ -253,6 +253,12 @@ BlazeComponent.extendComponent({
       if ($subtasksDom.data('sortable')) {
         $subtasksDom.sortable('option', 'disabled', !userIsMember());
       }
+      if ($checklistsDom.data('sortable')) {
+        $checklistsDom.sortable('option', 'disabled', Utils.isMiniScreen());
+      }
+      if ($subtasksDom.data('sortable')) {
+        $subtasksDom.sortable('option', 'disabled', Utils.isMiniScreen());
+      }
     });
   },
 

client/components/cards/checklists.js

@@ -60,6 +60,9 @@ BlazeComponent.extendComponent({
       if ($itemsDom.data('sortable')) {
         $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
       }
+      if ($itemsDom.data('sortable')) {
+        $(self.itemsDom).sortable('option', 'disabled', Utils.isMiniScreen());
+      }
     });
   },
 

client/components/cards/minicard.jade

@@ -4,8 +4,8 @@ template(name="minicard")
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="minicard-{{colorClass}}")
     if isMiniScreen
-      .handle
+      //.handle
-        .fa.fa-arrows
+      //  .fa.fa-arrows
     unless isMiniScreen
       if showDesktopDragHandles
         .handle

client/components/lists/list.js

@@ -133,14 +133,33 @@ BlazeComponent.extendComponent({
         $cards.sortable({
           handle: '.handle',
         });
-      } else {
+      } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
         $cards.sortable({
           handle: '.minicard',
         });
       }
 
-      // Disable drag-dropping if the current user is not a board member or is comment only
+      if ($cards.data('sortable')) {
-      $cards.sortable('option', 'disabled', !userIsMember());
+        $cards.sortable(
+          'option',
+          'disabled',
+          // Disable drag-dropping when user is not member/is miniscreen
+          !userIsMember(),
+          // Not disable drag-dropping while in multi-selection mode
+          // MultiSelection.isActive() || !userIsMember(),
+        );
+      }
+
+      if ($cards.data('sortable')) {
+        $cards.sortable(
+          'option',
+          'disabled',
+          // Disable drag-dropping when user is not member/is miniscreen
+          Utils.isMiniScreen(),
+          // Not disable drag-dropping while in multi-selection mode
+          // MultiSelection.isActive() || !userIsMember(),
+        );
+      }
     });
 
     // We want to re-run this function any time a card is added.

client/components/lists/listHeader.jade

@@ -30,10 +30,10 @@ template(name="listHeader")
               if canSeeAddCard
                 a.js-add-card.fa.fa-plus.list-header-plus-icon
               a.fa.fa-navicon.js-open-list-menu
-          a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+          //a.list-header-handle.handle.fa.fa-arrows.js-list-handle
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
-          a.list-header-handle.handle.fa.fa-arrows.js-list-handle
+          //a.list-header-handle.handle.fa.fa-arrows.js-list-handle
       else if currentUser.isBoardMember
         if isWatching
           i.list-header-watch-icon.fa.fa-eye

client/components/swimlanes/swimlanes.js

@@ -115,7 +115,7 @@ function initSortable(boardComponent, $listsDom) {
       $listsDom.sortable({
         handle: '.js-list-handle',
       });
-    } else {
+    } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) {
       $listsDom.sortable({
         handle: '.js-list-header',
       });
@@ -126,21 +126,34 @@ function initSortable(boardComponent, $listsDom) {
       $listsDom.sortable(
         'option',
         'disabled',
-        // Disable drag-dropping when user is not member
+        // Disable drag-dropping when user is not member/is worker/is miniscreen
         !userIsMember(),
         // Not disable drag-dropping while in multi-selection mode
         // MultiSelection.isActive() || !userIsMember(),
       );
     }
 
-    $listsDom.sortable(
+    if ($listDom.data('sortable')) {
-      'option',
+      $listsDom.sortable(
-      'disabled',
+        'option',
-      // Disable drag-dropping when user is not member
+        'disabled',
-      Meteor.user().isWorker(),
+        // Disable drag-dropping when user is not member/is worker/is miniscreen
-      // Not disable drag-dropping while in multi-selection mode
+        Meteor.user().isWorker(),
-      // MultiSelection.isActive() || !userIsMember(),
+        // Not disable drag-dropping while in multi-selection mode
-    );
+        // MultiSelection.isActive() || !userIsMember(),
+      );
+    }
+
+    if ($listDom.data('sortable')) {
+      $listsDom.sortable(
+        'option',
+        'disabled',
+        // Disable drag-dropping when user is not member/is worker/is miniscreen
+        Utils.isMiniScreen(),
+        // Not disable drag-dropping while in multi-selection mode
+        // MultiSelection.isActive() || !userIsMember(),
+      );
+    }
   });
 }
 

client/lib/utils.js

@@ -147,8 +147,38 @@ Utils = {
   // in a small window (even on desktop), Wekan run in compact mode.
   // we can easily debug with a small window of desktop browser. :-)
   isMiniScreen() {
+    // OLD WINDOW WIDTH DETECTION:
     this.windowResizeDep.depend();
     return $(window).width() <= 800;
+
+    // NEW TOUCH DEVICE DETECTION:
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+
+    /*
+    var hasTouchScreen = false;
+    if ("maxTouchPoints" in navigator) {
+        hasTouchScreen = navigator.maxTouchPoints > 0;
+    } else if ("msMaxTouchPoints" in navigator) {
+        hasTouchScreen = navigator.msMaxTouchPoints > 0;
+    } else {
+        var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
+        if (mQ && mQ.media === "(pointer:coarse)") {
+            hasTouchScreen = !!mQ.matches;
+        } else if ('orientation' in window) {
+            hasTouchScreen = true; // deprecated, but good fallback
+        } else {
+            // Only as a last resort, fall back to user agent sniffing
+            var UA = navigator.userAgent;
+            hasTouchScreen = (
+                /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+                /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+            );
+        }
+    }
+    */
+    //if (hasTouchScreen)
+    //    document.getElementById("exampleButton").style.padding="1em";
+    //return false;
   },
 
   calculateIndexData(prevData, nextData, nItems = 1) {