added sorting for the multiple relations form field

ui/src/components/records/fields/RelationField.svelte

@@ -5,6 +5,7 @@
     import ApiClient from "@/utils/ApiClient";
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
+    import Draggable from "@/components/base/Draggable.svelte";
     import RecordsPicker from "@/components/records/RecordsPicker.svelte";
     import RecordInfo from "@/components/records/RecordInfo.svelte";
 
@@ -101,6 +102,10 @@
         CommonHelper.removeByKey(list, "id", rel.id);
         list = list;
 
+        listToValue();
+    }
+
+    function listToValue() {
         if (isMultiple) {
             value = list.map((r) => r.id);
         } else {
@@ -126,22 +131,34 @@
 
     <div class="list">
         <div class="relations-list">
-            {#each list as record (record.id)}
-                <div class="list-item">
-                    <div class="content">
-                        <RecordInfo {record} displayFields={field.options?.displayFields} />
+            {#each list as record, i (record.id)}
+                <Draggable
+                    bind:list
+                    group={field.name + "_relation"}
+                    index={i}
+                    disabled={!isMultiple}
+                    let:dragging
+                    let:dragover
+                    on:sort={() => {
+                        listToValue();
+                    }}
+                >
+                    <div class="list-item" class:dragging class:dragover>
+                        <div class="content">
+                            <RecordInfo {record} displayFields={field.options?.displayFields} />
+                        </div>
+                        <div class="actions">
+                            <button
+                                type="button"
+                                class="btn btn-transparent btn-hint btn-sm btn-circle btn-remove"
+                                use:tooltip={"Remove"}
+                                on:click={() => remove(record)}
+                            >
+                                <i class="ri-close-line" />
+                            </button>
+                        </div>
                     </div>
-                    <div class="actions">
-                        <button
-                            type="button"
-                            class="btn btn-transparent btn-hint btn-sm btn-circle btn-remove"
-                            use:tooltip={"Remove"}
-                            on:click={() => remove(record)}
-                        >
-                            <i class="ri-close-line" />
-                        </button>
-                    </div>
-                </div>
+                </Draggable>
             {:else}
                 {#if isLoading}
                     {#each CommonHelper.toArray(value).slice(0, 10) as _}