Drag Drop Between Two TreeViews in Blazor .NET
IntegralUI TreeView comes with built-in functionality that allows you to drag and drop items within the same TreeView or to other Blazor components. Drag and Drop operations are accompanied with events that allow you to customize this process in whole.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, you can drag and drop items from left to the right TreeView and vice versa. When item is dragged you can choose whether you want to move it at drop position or place an exact copy of it by holding the SHIFT key. Using Allow Drag and Allow Drop check boxes, you can choose how drag and drop will work for both tree views on general level.
General Drag Drop Conditions in Blazor TreeView
By default, drag and drop is not allowed. To make sure items are draggable and the target TreeView can accept them when they are dropped, you need to set the following properties to true:
- AllowDrag - determines whether TreeView items are draggable (false by default)
- AllowDrop - determines whether TreeView can accept items or other objects to drop (false by default)
You can change these properties on demand when required, for example using checkboxes to change the property value.
When AllowDrag is set to false, the drag drop operation is suspended and you cannot drag items. In similar way, when AllowDrop is set to false, you cannot drop items. This is useful in cases when you want to limit the drag drop operation between different TreeViews.
For example, let us have the following settings:
Left TreeView: AllowDrag = true, AllowDrop = false
Right TreeView: AllowDrag = false, AllowDrop = true
This allows you to move items from left to right only, but you cannot move items within the left tree view. In addition, once items are moved to the right TreeView, you cannot move them again, because dragging is not allowed.
How to Cancel Drag and Drop in Blazor TreeView
In most cases, general drag drop conditions mentioned above are not enough. To customize drag and drop operations, you can set custom fields for items or handle the DragOver event to determine whether a specific item is draggable or not.
On individual level, each item also has two properties: AllowDrag and AllowDrop. This allows you to exclude some item to be dragged or to not allow other items to drop over this item.
In addition, you can handle the DragOver event and prevent drops over root items where Id value is below "4":
If condition is fulfilled, the Cancel field of event data is set to true. This cancels further execution of drag drop operation and shows the 'no drop' icon during dragging process.
Another example, you may want to reorder items but prevent them to become children of other items. In this case, use the DropPos field of event data and if it is equal to 0, than cancel the drag drop:
Drag and Drop Event Data
The event data in DragOver and DragDrop events contains information that you can use in your code to customize the drag drop operations in whole and create the best solution for your application requirements. Detailed information about each event is available here: TreeView Drag and Drop Events.
Conclusion
IntegralUI TreeView component for Angular, React and Vue has built-n advanced drag and drop functionality. You can either use existing general conditions or create your own custom drag drop operations. By adding event handlers and handling the event data, you can create the best solution for your application requirements. You can drag and drop items within the same TreeView or between two or more tree views.
TreeView is part of IntegralUI for Blazor, a suite of advanced UI components that you can use to develop applications in Blazor .NET framework.