Hello, I read the source code, there are one question

[tangjian1891]

file：useDraggable.ts
/**

• Changed sorting within list
• @param {DraggableEvent} evt
  */
  function onUpdate(evt: DraggableEvent) {
  const { from, item, oldIndex, newIndex } = evt
  removeNode(item) //146
  insertNodeAt(from, item, oldIndex!) //147
  moveArrayElement(unref(list), oldIndex!, newIndex!)
  }

update function, why do I delete the node and then insert the node, and I find that these two lines of code, when executed, move the dom of sortablejs back, the actual effective code is moveArrayElement function.

So, are these two lines of code useless?

[tangjian1891]

The second question:
file:src/utils/index.ts
/**

• Inserts a element into the DOM at a given index.
• @param parentElement
• @param element
• @param {number} index
  */
  export function insertNodeAt(
  parentElement: Element,
  element: Element,
  index: number
  ) {
  const refElement =
  index === 0 ? parentElement.firstChild : parentElement.children[index]
  parentElement.insertBefore(element, refElement)
  }

请问:
为什么对于index=0的drag-item要单独获取第一个firstChild。直接使用parentElement.children[index]获取元素不可以吗？ 或者使用 parentElement.firstElementChild获取Element不可以吗？

调试发现parentElement.firstChild会获取到textNode或commentNode,这样经过dom操作后，好像导致了vue的diff失效。

[Alfred-Skyblue]

Hello, thank you for your question. Here is our response:

1. In the onUpdate function, I performed deletion and insertion operations on the dom element and then used moveArrayElement. The reason for this is that I needed to delete and insert the dom element to trigger the animation effect. Simply moving the array element would not trigger the animation effect when updating the page.
2. I have already made the necessary modifications to this code in the latest version. Thank you.