Error appears after dragging last item in the list while another item in the list disappears in the meantime

[szczupag]

I use vue draggable in my app in dynamic lists where the list items may dynamically occur or disappear.
If user drags last device from a list and in the meantime any other item from the same list disappears then an error would be thrown, blocking the UI. The issue is caused by insertNodeAt function attempting to access an element at a position that is no longer accurate since one of the elements from the list was removed:

function insertNodeAt(fatherNode, node, position) {
  const refNode =
    position === 0
      ? fatherNode.children[0]
      : fatherNode.children[position - 1].nextSibling; // The element fatherNode.children[position - 1] doesn't exists since an item was dynamically removed from the list
  fatherNode.insertBefore(node, refNode);
}

Jsfiddle link

https://codesandbox.io/s/frosty-sanderson-t78lkf?file=/src/App.vue

Step by step scenario

1. Drag Gerard item
2. Observe that Joao item disappears
3. Drop Gerard item
4. Observe an error:

   Uncaught TypeError: Cannot read properties of undefined (reading 'nextSibling')
       at insertNodeAt (vuedraggable.umd.js:1497:93)
       at VueComponent.onDragRemove (vuedraggable.umd.js:2368:45)
       at Sortable.eval (vuedraggable.umd.js:1984:33)
       at dispatchEvent (sortable.esm.js:658:21)
       at _dispatchEvent (sortable.esm.js:698:3)
       at Sortable._onDrop (sortable.esm.js:1538:13)
       at Sortable.handleEvent (sortable.esm.js:1606:14)
   

Expected Solution

insertNodeAt function should safely access children in fatherNode and set refNode to undefined if the children doesn't exist, so that the dragged element would be inserted at the end of the list without throwing an error.