fixed issue with drag and drop reordering

dist/css/field.css

@@ -1 +1,38 @@
-.flexible-search-menu-multiselect{--ms-font-size:0.875rem;--ms-option-font-size:0.875rem;--ms-ring-color:rgb(var(--colors-primary-100));--ms-border-color:rgb(var(--colors-gray-300))}html.dark .flexible-search-menu-multiselect{--ms-ring-color:rgb(var(--colors-gray-700));--ms-border-color:rgb(var(--colors-gray-700));--ms-dropdown-border-color:var(--ms-border-color);--ms-bg:rgb(var(--colors-gray-900));--ms-dropdown-bg:var(--ms-bg);--ms-option-bg-pointed:rgb(var(--colors-gray-700));--ms-option-color-pointed:rgb(var(--colors-gray-400))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-50),var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}.nova-flexible-content-sortable-ghost{opacity:.5}.nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-100),var(--tw-bg-opacity));border-radius:10px}.dark .nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}
+.flexible-search-menu-multiselect {
+  --ms-font-size: 0.875rem;
+  --ms-option-font-size: 0.875rem;
+  --ms-ring-color: rgb(var(--colors-primary-100));
+  --ms-border-color: rgb(var(--colors-gray-300));
+}
+html.dark .flexible-search-menu-multiselect {
+  --ms-ring-color: rgb(var(--colors-gray-700));
+  --ms-border-color: rgb(var(--colors-gray-700));
+  --ms-dropdown-border-color: var(--ms-border-color);
+  --ms-bg: rgb(var(--colors-gray-900));
+  --ms-dropdown-bg: var(--ms-bg);
+  --ms-option-bg-pointed: rgb(var(--colors-gray-700));
+  --ms-option-color-pointed: rgb(var(--colors-gray-400));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-50), var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}
+
+.nova-flexible-content-sortable-ghost {
+  opacity: 0.5;
+}
+
+.nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-100), var(--tw-bg-opacity));
+  border-radius: 10px;
+}
+
+.dark .nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}

resources/js/components/FormField.vue

@@ -272,16 +272,17 @@ export default {
                 scrollSpeed: 5,
                 animation: 500,
                 onEnd: (evt) => {
-                    const item = evt.item;
-                    const key = item.id;
-                    const oldIndex = evt.oldIndex;
-                    const newIndex = evt.newIndex;
-
-                    if (newIndex < oldIndex) {
-                        this.moveUp(key);
-                    } else if (newIndex > oldIndex) {
-                        this.moveDown(key);
+                    let neighborIndex;
+
+                    this.order.splice(this.order.indexOf(evt.item.id), 1);
+
+                    if (evt.oldIndex < evt.newIndex) {
+                        neighborIndex = this.order.indexOf(evt.item.previousElementSibling.id) + 1;
+                    } else {
+                        neighborIndex = this.order.indexOf(evt.item.nextElementSibling.id);
                     }
+
+                    this.order.splice(neighborIndex, 0, evt.item.id);
                  }
             });
         },