Fix drag and drop on mobile

CHANGELOG.md

@@ -9,6 +9,12 @@ All notable changes to this project will be documented in this file. The format
 - "Lifting" objectives are now also allowed during the creation flow, not only
   when edited.
 
+### Changed
+
+- Drag and drop ordering of measurements and key results are now triggered by
+  using a specific handle (the "drag icon"). This prevents accidental dragging,
+  especially on mobile devices.
+
 ### Breaking changes
 
 - The API endpoint for listing KPIs (measurements) now uses cursor-based

src/components/KeyResultLinkCard.vue

@@ -15,6 +15,7 @@
           <span class="key-result-link-card__title pkt-txt-14">
             {{ title }}
           </span>
+          <pkt-icon v-if="draggable" class="drag-icon" name="drag" />
         </div>
 
         <div>
@@ -56,6 +57,10 @@ export default {
       required: false,
       default: null,
     },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
     active: {
       type: Boolean,
       default: false,
@@ -95,6 +100,16 @@ export default {
     justify-content: space-between;
   }
 
+  .drag-icon {
+    --fg-color: var(--color-grayscale-30);
+    cursor: move;
+
+    ::v-deep svg {
+      height: 0.875rem;
+      min-height: 0.875rem;
+    }
+  }
+
   .item-tag {
     display: flex;
     justify-content: end;

src/components/KpiWidgetGroup.vue

@@ -24,7 +24,12 @@
         </pkt-button>
       </template>
     </div>
-    <draggable v-if="hasEditRights" v-model="orderedKpis" animation="300">
+    <draggable
+      v-if="hasEditRights"
+      v-model="orderedKpis"
+      animation="300"
+      handle=".drag-icon"
+    >
       <transition-group class="kpi-widget-group__kpis">
         <kpi-widget-group-link
           v-for="kpi in orderedKpis"

src/components/panes/ObjectivePane.vue

@@ -60,6 +60,7 @@
         v-model="orderedKeyResults"
         class="objective-pane__key-results-list"
         animation="300"
+        handle=".drag-icon"
       >
         <transition-group>
           <key-result-link-card
@@ -72,6 +73,7 @@
             :title="keyResult.name"
             :progression="keyResult.progression"
             :owner="keyResult.parent?.name ? keyResult.parent : null"
+            :draggable="true"
             :active="activeKeyResult && activeKeyResult.id === keyResult.id"
           />
         </transition-group>

src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue

@@ -170,6 +170,7 @@ export default {
 
   .drag-icon {
     --fg-color: var(--color-grayscale-30);
+    cursor: move;
 
     ::v-deep svg {
       height: 0.875rem;