Fix dnd in safari

Fixes #4345

app/src/components/v-field-select/v-field-select.vue

@@ -3,7 +3,14 @@
 		{{ $t('no_fields_in_collection', { collection: (collectionInfo && collectionInfo.name) || collection }) }}
 	</v-notice>
 
-	<draggable v-else v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+	<draggable
+		v-else
+		:force-fallback="true"
+		v-model="selectedFields"
+		draggable=".draggable"
+		:set-data="hideDragImage"
+		class="v-field-select"
+	>
 		<v-chip
 			v-for="(field, index) in selectedFields"
 			:key="index"

app/src/components/v-table/v-table.vue

@@ -40,6 +40,7 @@
 				</tr>
 			</tbody>
 			<draggable
+				:force-fallback="true"
 				v-else
 				v-model="_items"
 				tag="tbody"

app/src/interfaces/m2a-builder/m2a-builder.vue

@@ -6,6 +6,7 @@
 
 		<draggable
 			v-else
+			:force-fallback="true"
 			:value="previewValues"
 			handle=".drag-handle"
 			@input="onSort"

app/src/interfaces/repeater/repeater.vue

@@ -3,6 +3,7 @@
 		<draggable :value="value" handle=".drag-handle" @input="onSort" :set-data="hideDragImage">
 			<repeater-row
 				v-for="(row, index) in value"
+				:force-fallback="true"
 				:key="index"
 				:value="row"
 				:template="_template"

app/src/layouts/tabular/tabular.vue

@@ -24,7 +24,7 @@
 
 			<div class="field">
 				<div class="type-label">{{ $t('layouts.tabular.fields') }}</div>
-				<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage">
+				<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage" :force-fallback="true">
 					<v-checkbox
 						v-for="field in activeFields"
 						v-model="fields"
@@ -391,6 +391,11 @@ export default defineComponent({
 						fieldsInCollection.value
 							.filter((field) => !!field.meta?.hidden === false)
 							.slice(0, 4)
+							.sort((a?: Field, b?: Field) => {
+								if (a!.field < b!.field) return -1;
+								else if (a!.field > b!.field) return 1;
+								else return 1;
+							})
 							.map(({ field }) => field);
 
 					return fields;
@@ -437,12 +442,7 @@ export default defineComponent({
 				get() {
 					return fields.value
 						.map((key) => fieldsInCollection.value.find((field) => field.field === key))
-						.filter((f) => f)
-						.sort((a?: Field, b?: Field) => {
-							if (a!.field < b!.field) return -1;
-							else if (a!.field > b!.field) return 1;
-							else return 1;
-						}) as Field[];
+						.filter((f) => f) as Field[];
 				},
 				set(val) {
 					fields.value = val.map((field) => field.field);

app/src/modules/settings/routes/data-model/fields/components/fields-management.vue

@@ -7,6 +7,7 @@
 		<draggable
 			class="field-grid"
 			:value="usableFields"
+			:force-fallback="true"
 			handle=".drag-handle"
 			group="fields"
 			:set-data="hideDragImage"