I am using the TreeView of Fluent UI for Blazor and try to combine it with Sortable JS.
I followed the example of Sortable JS for nested sortables and set everything up – but now I’m having the problem that when I set the class (which is used to find the elements for wich a new sortable is created) on the FluentTreeItem itself (the folder in my case) the item isn’t dragable. The children, however, work as expected.

I assume that if I wrap all children of a folder in a and set the class there, this problem will be solved. Unfortunately, this messes up the style – especially the expand folder part of the fluent component and the vertical listing.

The component where I use the FluentTreeItem looks like this:

<FluentTreeItem>
  @Node.Name
  <div class="sortableJsClass">
     @foreach (var child in Node.Children)
     {
        <CustomTreeItem Node="@child"></CustomTreeItem>
     }
  </div>
</FluentTreeItem>

I use this component for the FluentTreeView:

<FluentTreeView Data="@TreeItems">
    <div class="sortableJsClass">
    @foreach (var node in GetFilterdNodes())
    {
        <CustomTreeItem Node="@node"></CustomTreeItem >
    }
    </div>
</FluentTreeView>

This is how I expect it to look

And this is what happens as soon as I insert the