Best practice for getting Blazor Components to play nicely with JavaScript Drag and Drop

Question

The native drag-drop in Blazor is very limited and as I understand it the recommendation for implementing drag and drop features in Blazor is to use one of the many JavaScript Drag and Drop libraries via interop.

However, messing with the DOM underneath Blazor is problematic and, as far as I know is generally considered a bad idea, because Blazor is doing all sorts of clever stuff and managing the DOM for us so that it can to partial rendering and other clever things by keeping track of everything.

The problem I'm having is using drag and drop in javascript has to maniplate the DOM to work, but when I do that Blazor can get in a tangle.

If the items to be dragged and dropped are simple and don't require c# intereaction from Blazor it is possible to hand over to the JavaScript and just update the model using interop. However, if the components being dragged and dropped need to be have implementation in Blazor (e.g Kanban board cards with edit and context menus and such) it is required that the Blazor can still work with the components while the JavaScript moves them around. Basic Drag Drop scenarios seem fine, moving things from one list to another or reordering things in a list.

However, when I start trying to add things to lists that I've already dragged and dropped, or I want to dynamically remove a list and reassign its contents to another list on the page I find that list items just disappear and never render. If I navigate away and return to the page they appear in the right places (so the data has been updated correctly) but the Blazor side seems to lose the element references or the Javascript seems to drop them down a hole.

I've tried various different JavaScript libraries in various different ways and I always seem to get tangled with this conflict between the Javascript vision of the DOM and the Blazor's vision of the DOM.

I'm currently using Muuri and every time I add or remove an element in the c# code I completely destroy the Muuri instance and re-init the JavaScript with the new Blazor DOM - but even this heavy-handed approach still has glitches where Blazor decides not to rerender some components in some cases.

Given that JavaScript drag and drop is the only viable way to make any decent drag and stop implementation is there anywhere a set of best practices or examples of how to achive this without the two fighting over the DOM?

One thing that would be very useful would be a way to tell Blazor to completely render a component from scratch as if it had never rendered before, so that it is in a known state. I have found that even removing a component from the page and putting back again (using a switch in the page code to swap it out with a 'refreshing' icon and then putting it back) isn't enough to trick Blazor into doing a clean render. I'm at the point now where I'm trying things like navigating to a whole different page in the site (with a 'loading' gif on it) and then on that page's after render just navigating back to the page with the drag drop component so that the whole page rerenders - but this seems totally crazy as a way of just getting a single component to fully re-render.

Any pointers or thoughts appreciated :)