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.