Drag and Drop in Blazor List Box
IntegralUI List Box component comes with built-in support for drag and drop operations. You can drag and drop items from one position to another within the same or to different components like: List Box, ListView, TreeView or 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.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, there are is a list with some items. The item drag and drop is enabled, to start it left-click an item and while holding the left mouse button pressed, start dragging the item in any direction. When item is dragged, all other items will move making an empty space showing where item can drop. To drop an item, release the mouse button. Depending on drop position, the item will place accordingly in the list.
General Drag Drop Settings
By default, item drag and drop is disabled. There are two general properties that controls whether it is allowed or not:
- AllowDrag - determines whether dragging of items is allowed
- AllowDrop - determines whether items can be dropped
Initially, both properties are set to false. This means that in order to start drag and drop, the AllowDrag property must be set to true and for the target List Box, and AllowDrop must also be true in order to drop an item over component space:
Once the item dragging is enabled, you can left-click an item and while holding the mouse button pressed, drag the item to another position.
How to Prevent Item from Dragging
In cases when you have multiple items, you may want some items to remain non-draggable. You can do this by setting the AllowDrag property of specific item to false. By setting this, when trying to left-click and drag an item, it will not work, because dragging is disabled for that specific item.
In this example, item with label set to "Malena" is not draggable.
How to Prevent Drops over Target Item Space
In addition, if you want to prevent other items to drop over specific target item, just set its AllowDrop field to false. This will result in changing the drag cursor to NO DROP, whenever an item is dragged over this specific target item space.
Available Drag and Drop Events in Blazor List Box
Whenever an item is dragged within the Blazor List Box component, several events can occur. Here is a list of events that may fire:
- DragEnd - occurs when drag and drop ends
- DragEnter - occurs when item is dragged over List Box 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 List Box space
- DragStart - occurs when drag and drop starts
Detailed information is available here: How to Handle Drag and Drop Events in Blazor List Box./p>
By handling these events in your code, you can cancel the predefined drag drop behavior and add your own custom drag drop operations.
Move Items from One List Box to Another List
You can move items between multiple List Boxes or to different 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 data, you can change the drag and drop operation with custom actions set in your code.
More information about this topic you can find in this article: Drag and Drop between Two List Boxes in Blazor .NET.
Multiple Items Drag and Drop
Moving items one by one is a time consuming process and in most cases undesirable when you have a large list. There is an option to drag and drop multiple items at once, if the multi-selection is enabled.
When item selection in the List Box is set to MultiSimple or MultiExtended, you can select more than one item. Furthermore, if the drag and drop is also enabled, you can start the drag process by clicking and moving one of selected items. Because multiple items are selected, all are included within the drag event data and once dropped, all will place at target position.
The event data remains the same, the only difference is that instead of one item, an array of item objects is included. The How to Drag and Drop Multiple Items in Blazor List Box article, explains in detail how to handle this operation.
Create a 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.
The article: How to Copy Item with Drag Drop explains in detail how to achieve that in Blazor .NET.
Conclusion
IntegralUI List Box for Blazor comes with built-in support for drag and drop. You can set custom conditions on how and when the drag drop will take place, handle different events and further customize the overall process. In addition, reordering or moving multiple items from one to other components is also supported.
List Box is an UI Component, part of IntegralUI for Blazor that you can use in .NET framework to develop web applications.