migrate to vue.draggable.next

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

src/components/Questions/QuestionDropdown.vue

@@ -44,24 +44,22 @@
 				v-else
 				v-model="sortedOptions"
 				class="question__content"
-				animation="200"
+				:animation="200"
 				direction="vertical"
 				handle=".option__drag-handle"
 				invert-swap
-				tag="ul"
+				tag="transition-group"
+				:component-data="{
+					name: isDragging
+						? 'no-external-transition-on-drag'
+						: 'options-list-transition',
+				}"
 				@change="saveOptionsOrder"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<TransitionGroup
-					:name="
-						isDragging
-							? 'no-external-transition-on-drag'
-							: 'options-list-transition'
-					">
+				<template #item="{ element: answer, index }">
 					<!-- Answer text input edit -->
 					<AnswerInput
-						v-for="(answer, index) in sortedOptions"
-						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:form-id="formId"
@@ -77,7 +75,7 @@
 						@move-up="onOptionMoveUp(index)"
 						@move-down="onOptionMoveDown(index)"
 						@tabbed-out="checkValidOption" />
-				</TransitionGroup>
+				</template>
 			</Draggable>
 		</template>
 

src/components/Questions/QuestionMultiple.vue

@@ -120,24 +120,21 @@
 				v-else
 				v-model="sortedOptions"
 				class="question__content"
-				animation="200"
+				:animation="200"
 				direction="vertical"
 				handle=".option__drag-handle"
 				invert-swap
-				tag="ul"
+				tag="transition-group"
+				:component-data="{
+					name: isDragging
+						? 'no-external-transition-on-drag'
+						: 'options-list-transition',
+				}"
 				@change="saveOptionsOrder"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<TransitionGroup
-					:name="
-						isDragging
-							? 'no-external-transition-on-drag'
-							: 'options-list-transition'
-					">
-					<!-- Answer text input edit -->
+				<template #item="{ element: answer, index }">
 					<AnswerInput
-						v-for="(answer, index) in sortedOptions"
-						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:form-id="formId"
@@ -152,7 +149,7 @@
 						@move-up="onOptionMoveUp(index)"
 						@move-down="onOptionMoveDown(index)"
 						@tabbed-out="checkValidOption" />
-				</TransitionGroup>
+				</template>
 			</Draggable>
 			<li
 				v-if="allowOtherAnswer"

src/views/Create.vue

@@ -116,22 +116,20 @@
 				<Draggable
 					v-model="form.questions"
 					:animation="200"
-					tag="ul"
+					tag="transition-group"
+					:component-data="{
+						name: isDragging
+							? 'no-external-transition-on-drag'
+							: 'question-list',
+					}"
 					handle=".question__drag-handle"
 					@change="onQuestionOrderChange"
 					@start="isDragging = true"
 					@end="isDragging = false">
-					<transition-group
-						:name="
-							isDragging
-								? 'no-external-transition-on-drag'
-								: 'question-list'
-						">
+					<template #item="{ element: question, index }">
 						<component
 							:is="answerTypes[question.type].component"
-							v-for="(question, index) in form.questions"
 							ref="questions"
-							:key="question.id"
 							v-model="form.questions[index]"
 							:can-move-down="index < form.questions.length - 1"
 							:can-move-up="index > 0"
@@ -142,7 +140,7 @@
 							@delete="deleteQuestion(question.id)"
 							@move-down="onMoveDown(index)"
 							@move-up="onMoveUp(index)" />
-					</transition-group>
+					</template>
 				</Draggable>
 
 				<!-- Add new questions menu -->