Sorting breaking when using blazor components in SortableItemTemplate

[DavidGabelgaard]

Problem:
The revering back in onUpdate uses index of the items, however since blazor adds a comment like this ( ) between its componenets as markers for its internal rendering logic using index no longer works

Solution: in the js file create a function to filter out the comments:
function filterCommentNodes(nodes) {
return Array.from(nodes).filter(node => node.nodeType !== Node.COMMENT_NODE);
}
and use that like normal
event.to.insertBefore(event.item, filterCommentNodes(event.to.childNodes)[event.oldIndex]);

Thanks for an awsome project

[anthony-finn]

I was having some issues where my ordering would be incorrect after dragging, and this fixed it!

[kovke436]

Problem: The revering back in onUpdate uses index of the items, however since blazor adds a comment like this ( ) between its componenets as markers for its internal rendering logic using index no longer works

Solution: in the js file create a function to filter out the comments: function filterCommentNodes(nodes) { return Array.from(nodes).filter(node => node.nodeType !== Node.COMMENT_NODE); } and use that like normal event.to.insertBefore(event.item, filterCommentNodes(event.to.childNodes)[event.oldIndex]);

Thanks for an awsome project

Thanks man, helped me alot! 👍

[MSE1188]

You can also just use the .children property instead of .childNodes, it is already filtered.

event.to.insertBefore(event.item, event.to.children[event.oldIndex]);