Drag and Drop in TreeView for Blazor .NET
IntegralUI TreeView component for Blazor .NET has a built-in feature that allows you to drag and drop items from one position to another within the same tree view or to other Blazor components. During this process, several drag and drop events are fired that you can handle in your code and cancel or further enhance the drag drop functionality.
In this article you will find general information about each topic related to drag and drop in Blazor TreeView. You can find detailed information using links in provided sub-topics below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, a small tree hierarchy is added to the TreeView component on initialization. To start drag and drop left-click on some item and while holding the mouse button pressed drag the item in any direction. When item is dragged, it will detach from the list and you can freely move it within the TreeView space. All other items will move and make an empty space showing where you can drop the dragged item, above or below the target item. To drop the dragged item, release the mouse button. Depending on drop position, the item will place accordingly.
You can drag and drop multiple items at once.
To drop an item as a child of target item, the dragged item content will move to the right, visually representing that when dropped it will appear as a child.
When item is dragged outside tree view space, the drag window will change showing the item label and a number stating how many other items are dragged, if any.
General Drag Drop Conditions
By default, drag and drop is disabled in Blazor TreeView component. There are two general properties that controls whether drag drop is allowed or not:
- AllowDrag - determines whether dragging of items is allowed, by default is false
- AllowDrop - determines whether items can be dropped, by default is false
This allows you to enable or disable drag and drop on demand, especially useful when you transfer items from one component to another.
To enable drag and drop in TreeView, set values for both of these properties to true.
Once enabled, you can left-click an item and while holding the mouse button pressed, move it to another position. During this process, other items will change their position showing an empty space where you can drop the item.
How to Exclude an Item from Drag and Drop
Properties mentioned above control the drag and drop functionality on component level, which means all tree items are affected.
In addition, each item has the same properties, which allows you to prevent some items to become dragged. By simple setting the item.AllowDrag property to false, the item will be excluded and you cannot drag it.
You can also prevent other items to drop over specific target item, just set its item.AllowDrop field to false.
Drag and Drop Events in Blazor TreeView
Whenever an item is dragged within the TreeView component, several events can occur. Here is a list:
- DragEnd - occurs when drag and drop ends
- DragEnter - occurs when item is dragged over TreeView space for the first time
- DragDrop - occurs when item drops
- DragLeave - occurs when dragged item leaves the component space
- DragOver - occurs when item is dragged over TreeView space
- DragStart - occurs when drag and drop starts
Detailed information is available here: How to Handle Drag and Drop Events in TreeView.
By handling these events in your code, you can cancel the predefined drag and drop behavior and add your own custom drag drop operations.
Move Items between TreeViews
You can move items between multiple TreeViews or other Blazor components. This process is possible because of IntegralUIDragDropData, a static class that holds the data about all items that are currently dragged. By using this class, you can intercept this data and process the drag and drop using custom actions.
Drag and Drop of Multiple Items
By default, you can drag one item at time. To enable drag and drop for multiple items, you only need to:
- Set the SelectionMode property to MultiSimple or MultiExtended
- Select multiple items before dragging starts
Once dragging starts, the drag window will include all previously selected items. However, it will show only small number of items (by default is set to 3), to make sure its size is smaller than TreeView size. In this way, the empty space will increase in size, showing exactly where items can drop.
All items that are dragged will be present in the drag and drop event data. The How to Drag and Drop Multiple Items in TreeView article, explains in detail how to handle this operation.
How to Copy Item with Drag and Drop
In some cases, instead of moving you may need to create a copy item(s) during drag and drop. Mostly this happens when you want to create a duplicate item list, for example a duplicate of all selected items to be placed in a separate list.
To create a copy item, press and hold the SHIFT key before item drops at target location. The article: Create a Copy Item with Drag Drop in TreeView explains in detail how to achieve that.
Auto Expand Items on Drag Over
Because TreeView displays a tree hierarchy of items, some of them are children and they may be hidden from the current view if their parent is collapsed. If you want to drag and drop to some of these children, the parent needs to become expanded.
Now you can do this, by first expanding the parent item and then start dragging items, but it's much better if the parent item expands on demand, during drag and drop. To enable this functionality, set the AutoExpand property to true.
There is small delay of 500ms before target item expands, which allows you to move the dragged item freely.
In this way, you can go deep in the tree hierarchy while still holding an item during drag and drop.
Conclusion
IntegralUI TreeView comes with built-in support for drag and drop functionality. You can set conditions on general or individual level on when drag and drop can happen, handle different events and further customize the overall process. In addition, creating a copy item(s), reordering multiple items or moving them to other components is also available.
TreeView component is part of IntegralUI for Blazor library that you can use to develop web applications with Blazor .NET framework.