Drag and drop component for hierarchical

I have the following HTML hierarchy generated by a set of Blazor components (the hierarchy can be deeper in some cases):

<div><h1>1</h1><div class="content">        Content for section 1</div><div><h2>1.1</h2><div class="content">            Content for section 1.1</div><div><h3>1.1.1</h3><div class="content">                Content for section 1.1.1</div></div><div><h3>1.1.2</h3><div class="content">                Content for section 1.1.2</div></div></div><div><h2>1.2</h2><div class="content">            Content for section 1.2</div><div><h3>1.2.1</h3><div class="content">                Content for section 1.2.1</div></div><div><h3>1.2.2</h3><div class="content">                Content for section 1.2.2</div></div></div></div><div><h1>2</h1><div class="content">        Content for section 2</div><div><h2>2.1</h2><div class="content">            Content for section 2.1</div><div><h3>2.1.1</h3><div class="content">                Content for section 2.1.1</div></div><div><h3>2.1.2</h3><div class="content">                Content for section 2.1.2</div></div></div><div><h2>2.2</h2><div class="content">            Content for section 2.2</div><div><h3>2.2.1</h3><div class="content">                Content for section 2.2.1</div></div><div><h3>2.2.2</h3><div class="content">                Content for section 2.2.2</div></div></div></div>

I would like to allow users to drag and drop any node of this hierarchy to another node. For example, the user could move the following node:

<div><h3>2.2.1</h3><div class="content">        Content for section 2.2.1</div></div>

...to another part of the hierarchy, resulting in the following DOM structure:

<div><h1>1</h1><div class="content">        Content for section 1</div><div><h2>1.1</h2><div class="content">            Content for section 1.1</div><div><h3>1.1.1</h3><div class="content">                Content for section 1.1.1</div></div><!-- The node is moved here --><div><h3>2.2.1</h3><div class="content">                Content for section 2.2.1</div></div><div><h3>1.1.2</h3><div class="content">                Content for section 1.1.2</div></div></div><div><!-- Node #1.2 --></div></div><div><h1>2</h1><!-- The node #2 without the child node #2.2.1 --></div>

NOTE: If a node contains child nodes, all of its children should also be moved during the drag-and-drop operation.

• Do you know of any Blazor components that can handle this drag-and-drop behavior easily?
• If not, can you recommend a JS library that supports hierarchical drag-and-drop and is simple to integrate with Blazor with JS Interop?

Thanks in advance for your advices !