Implementing drag-and-drop with MudBlazor TreeView (or plain Blazor)

370 Views Asked by At

I have a requirement to implement drag-and-drop with a tree in a Blazor Wasm application, and I am looking for code that could help me jumpstart my work.

The page will contain two major parts: A tree (maybe a MudBlazor TreeView) and a list of items (we can assume simple texts, like "A", "B", "C", etc). The user shall be able to build a tree structure out of the items in the list.

The user should be able to drag an item from the list and drop on the tree, in which turn the item turns into a node in the tree. If the user drops an item on an existing tree node, the new node should become a child node. If the user drops the item between two tree nodes, the new node should be inserted between the nodes, etc. The user should also be able to move existing tree nodes within the tree.

Does anyone know any existing code that I could use as a jumpstart for this? We are already using MudBlazor, so we could use the MudBlazor TreeView, MuDropContainer, etc if that would help (the MudBlazor TreeView doesn't have support for drag-and-drop built-in). We don't want to take a dependency on other 3rd party packages, such as Telerik's TreeView (although it does seem to support what we are looking for, see https://demos.telerik.com/blazor-ui/treeview/drag-drop)

I have started looking at the task, and it seems to be rather complex, such as detecting where the user is hovering the item (on, below, above) and showing visual indicators.

Many thanks!

0

There are 0 best solutions below