fix: Add Touch Delay to Draggable on Touch Pads (#4440)

frontend/components/Domain/QueryFilterBuilder.vue

@@ -5,6 +5,8 @@
         <draggable
           :value="fields"
           handle=".handle"
+          delay="250"
+          delay-on-touch-only
           v-bind="{
             animation: 200,
             group: 'recipe-instructions',

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -5,6 +5,8 @@
       v-if="recipe.recipeIngredient.length > 0"
       v-model="recipe.recipeIngredient"
       handle=".handle"
+      delay="250"
+      delay-on-touch-only
       v-bind="{
         animation: 200,
         group: 'recipe-ingredients',

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -77,6 +77,8 @@
       :disabled="!isEditForm"
       :value="value"
       handle=".handle"
+      delay="250"
+      delay-on-touch-only
       v-bind="{
         animation: 200,
         group: 'recipe-instructions',

frontend/pages/g/_groupSlug/cookbooks/index.vue

@@ -53,7 +53,14 @@
 
       <!-- Cookbook List -->
       <v-expansion-panels class="mt-2">
-        <draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
+        <draggable
+          v-model="cookbooks"
+          handle=".handle"
+          delay="250"
+          delay-on-touch-only
+          style="width: 100%"
+          @change="actions.updateOrder()"
+        >
           <v-expansion-panel v-for="cookbook in cookbooks" :key="cookbook.id" class="my-2 left-border rounded">
             <v-expansion-panel-header disable-icon-rotate class="headline">
               <div class="d-flex align-center">

frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue

@@ -46,6 +46,8 @@
             v-if="parsedIng.length > 0"
             v-model="parsedIng"
             handle=".handle"
+            delay="250"
+            delay-on-touch-only
             :style="{ width: '100%' }"
             ghost-class="ghost"
           >

frontend/pages/household/mealplan/planner/edit.vue

@@ -100,6 +100,8 @@
         <draggable
           tag="div"
           handle=".handle"
+          delay="250"
+          delay-on-touch-only
           :value="plan.meals"
           group="meals"
           :data-index="index"

frontend/pages/shopping-lists/_id.vue

@@ -97,7 +97,15 @@
         @submit="saveLabelOrder"
         @close="cancelLabelOrder">
         <v-card height="fit-content" max-height="70vh" style="overflow-y: auto;">
-          <draggable v-if="localLabels" :value="localLabels" handle=".handle" class="my-2" @input="updateLabelOrder">
+          <draggable
+            v-if="localLabels"
+            :value="localLabels"
+            handle=".handle"
+            delay="250"
+            delay-on-touch-only
+            class="my-2"
+            @input="updateLabelOrder"
+          >
             <div v-for="(labelSetting, index) in localLabels" :key="labelSetting.id">
               <MultiPurposeLabelSection v-model="localLabels[index]" use-color />
             </div>