fix(useSortable): wrong order of elements (#4332)

ilyaliao · web-flow · commit 9e78eda0be24 · 2024-11-21T08:04:25.000Z
diff --git a/packages/integrations/useSortable/index.md b/packages/integrations/useSortable/index.md
@@ -102,7 +102,7 @@ import { moveArrayElement } from '@vueuse/integrations/useSortable'
 useSortable(el, list, {
   onUpdate: (e) => {
     // do something
-    moveArrayElement(list.value, e.oldIndex, e.newIndex)
+    moveArrayElement(list.value, e.oldIndex, e.newIndex, e)
     // nextTick required here as moveArrayElement is executed in a microtask
     // so we need to wait until the next tick until that is finished.
     nextTick(() => {
diff --git a/packages/integrations/useSortable/index.ts b/packages/integrations/useSortable/index.ts
@@ -46,7 +46,7 @@ export function useSortable<T>(
 
   const defaultOptions: Options = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex!, e.newIndex!)
+      moveArrayElement(list, e.oldIndex!, e.newIndex!, e)
     },
   }
 
@@ -80,11 +80,43 @@ export function useSortable<T>(
   }
 }
 
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+export function insertNodeAt(
+  parentElement: Element,
+  element: Element,
+  index: number,
+) {
+  const refElement = parentElement.children[index]
+  parentElement.insertBefore(element, refElement)
+}
+
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+export function removeNode(node: Node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node)
+}
+
 export function moveArrayElement<T>(
   list: MaybeRefOrGetter<T[]>,
   from: number,
   to: number,
+  e: Sortable.SortableEvent | null = null,
 ): void {
+  if (e != null) {
+    removeNode(e.item)
+    insertNodeAt(e.from, e.item, from)
+  }
+
   const _valueIsRef = isRef(list)
   // When the list is a ref, make a shallow copy of it to avoid repeatedly triggering side effects when moving elements
   const array = _valueIsRef ? [...toValue(list)] : toValue(list)
