Create Copy Item with Drag and Drop in List Box for Blazor .NET
Using drag and drop allows you to can move items during run time from one position to another in the same or between different components. Instead of moving items, you can also choose whether you can want to create a copy item, just before item is dropped at target position. In this article, you will learn how to copy item with drag and drop in dual List Box components for Blazor .NET.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, there is a list with some items and with drag and drop enabled. You can select an item and start dragging it from left to right. While over the right List Box, to create an item copy, hold the SHIFT key and release the mouse button. In this way, instead of moving the original item, you created a copy item in the second list.
To simplify the example, list on the left doesn't allow drops. You can only move or copy items from left to the right list. This is done by changing general drag and drop conditions where AllowDrop property is set to false.
You can also create copies within the same List Box component, or move/copy items from right to left, in general the functionality is the same.
How to Copy an Item during Drag and Drop in Blazor List Box
When item is dragged, you can choose whether you want to move it or create a copy item at target position. Holding the SHIFT key changes the drag and drop action from move to a copy operation. This is only required before drop, when you are sure of the target drop position.
When item is copied, a deep clone of the item object is created. This also includes a copy of all custom data fields set by you. The only difference is the Id property (if available) that uniquely identifies each item. As a result, you can have multiple duplicate items showing same data in the list, while still maintaining each item as a unique one.
You can clear the selection from the first list, by calling ClearSelection method when item(s) drops.
How to Handle DragDrop Event and Create a Copy Item
The other way to create a copy item is to handle the DragDrop event and cancel the default drag and drop functionality. Then, you can add your own code and create an item copy manually in the event handler. In this case, holding the SHIFT key is not required, because the item clone is created in code.
Conclusion
Using drag and drop functionality in IntegralUI List Box allows you to move one or multiple items at same time or create a copy item(s) at target position within the same or different lists. Creating an item copy during drag and drop is easy; you only need to hold the SHIFT key while item drops at target position. In other cases, you can also create an item copy manually in your code, by handling drag and drop events.
IntegralUI for Blazor is an UI library of advanced .NET components that includes the List Box. You can use it to develop web apps in .NET framework.