Issue : UI feature suggestion: drag handles and long press #1772

Resolved #1772

client/components/cards/minicard.jade

@@ -9,6 +9,8 @@ template(name="minicard")
         each labels
           .minicard-label(class="card-label-{{color}}" title="{{name}}")
     .minicard-title
+      .handle
+        .fa.fa-arrows
       if $eq 'prefix-with-full-path' currentBoard.presentParentTask
         .parent-prefix
           | {{ parentString ' > ' }}

client/components/cards/minicard.styl

@@ -94,6 +94,19 @@
   .minicard-custom-field-item
     max-width:50%;
     flex-grow:1;
+  .handle
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    display:none;
+    @media only screen and (max-width: 1199px) {
+      display:block;
+    }
+    .fa-arrows
+      font-size:20px;
+      color: #ccc;
   .minicard-title
     p:last-child
       margin-bottom: 0

client/components/lists/list.js

@@ -26,6 +26,13 @@ BlazeComponent.extendComponent({
 
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
+
+    if(window.matchMedia('(max-width: 1199px)').matches) {
+      $( '.js-minicards' ).sortable({
+        handle: '.handle',
+      });
+    }
+
     $cards.sortable({
       connectWith: '.js-minicards:not(.js-list-full)',
       tolerance: 'pointer',